Frontender's notes [ru]

Open in Telegram

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

Network:Frontender's notes [ru]Russia20 079 Technologies & Applications4 228...

📈 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 470 subscribers, ranking 4 228 in the Technologies & Applications category and 20 079 in the Russia region.

📊 Audience metrics and dynamics

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

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

Verification status: Not verified
Engagement rate (ER): The average audience engagement rate is 10.44%. Within the first 24 hours after publication, content typically collects 5.03% reactions from the total number of subscribers.
Post reach: On average, each post receives 3 390 views. Within the first day, a publication typically gains 1 633 views.
Reactions and interaction: The audience actively supports content: the average number of reactions per post is 32.
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 17 June, 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 470

Subscribers

-1024 hours

-347 days

-19230 days

3 390

Post views

~ 1 63324 hours

~ 1 98248 hours

10.44%

Engagement rate

~ 1

Posts per day

Ads index

beta

Data loading in progress...

Similar Channels

57.6K

NOP::Nuances of Programming

26.5K

FrontEndDev

21.3K

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

9.8K

HTML Academy

2.9K

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

More channels

Incoming and Outgoing Mentions

---

Attracting Subscribers

June '26

+84

in 0 channels

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
17 June	+3
16 June	+3
15 June	+1
14 June	+3
13 June	0
12 June	+8
11 June	+30
10 June	+20
09 June	+6
08 June	+1
07 June	0
06 June	0
05 June	+2
04 June	+3
03 June	+1
02 June	+1
01 June	+2

Channel Posts

bfcache в SPA: как не потерять мгновенный back/forward UX и не проснуться со старым состоянием bfcache - не кэш данных, а заморозка всей страницы: DOM, JS heap, scroll, router state и React/Vue-приложение. В production он ускоряет возврат назад/вперед, но часто ломается из-за cleanup «на всякий случай» или восстанавливает устаревшую сессию. Диагностика восстановления Главный сигнал - pageshow. При возврате из bfcache load не сработает, поэтому bootstrap, завязанный только на DOMContentLoaded / load, пропустит важную логику.

window.addEventListener('pageshow', e => {
  if (e.persisted) {
    revalidateCriticalQueries();
    syncAuthState();
    reconnectRealtime();
    resumeTimers();
  }
});

window.addEventListener('pagehide', e => {
  if (e.persisted) {
    pausePolling();
    closeEphemeralConnections();
  }
});

Что блокирует bfcache Частые причины: * unload handler; * лишний beforeunload; * WebSocket, WebRTC, BroadcastChannel, Web Locks; * незавершенные IndexedDB-транзакции; * активные fetch/stream-операции; * Cache-Control: no-store; * сторонние скрипты с unload. Типичная ошибка SPA - вешать unload для cleanup. Используйте pagehide, но не уничтожайте store и router state, если event.persisted === true. Как искать причины В Chrome DevTools откройте Application - Back/forward cache и запустите тест навигации. DevTools покажет blockers: active connection, unsupported feature, unload handler. Для логов используйте pageshow.persisted и pagehide.persisted. performance.getEntriesByType('navigation')[0].type === 'back_forward' полезен, но не гарантирует успешный restore из bfcache. Что восстанавливать после pageshow Проверяйте только внешнее состояние: auth/session, критичные query cache, realtime, polling, feature flags, time-based данные и синхронизацию вкладок. Вывод: bfcache - это продолжение жизни страницы, поэтому надежная SPA не перезапускается целиком, а точечно возобновляет ресурсы и пересинхронизирует данные.

2	Fetch Priority в production: как управлять LCP-ресурсами без starvation и регрессий загрузки fetchpriority — это не «ускоритель сайта», а hint для браузера: какой ресурс стоит поднять или опустить в очереди загрузки. В production он полезен прежде всего для LCP-ресурсов: hero image, poster, иногда preload шрифта/критичного ассета. Главная ошибка — ставить fetchpriority="high" на всё важное. Если всё high, то high не значит ничего. Более того, можно получить starvation: hero начнёт конкурировать с preload’ами, скриптами, шрифтами, картинками карусели и ухудшит загрузку остального критичного пути. Практическое правило: 1. Поднимать только реальный LCP-кандидат Один viewport, один главный ресурс. <img src="/hero.avif" srcset="/hero-768.avif 768w, /hero-1440.avif 1440w" sizes="100vw" width="1440" height="720" fetchpriority="high" decoding="async" alt="" > 2. Если LCP-ресурс поздно обнаруживается — используйте preload + fetchpriority Например, hero приходит из CSS background или рендерится поздно после JS. Лучше сделать ресурс discoverable раньше: <link rel="preload" as="image" href="/hero.avif" fetchpriority="high" /> Но не дублируйте бездумно: href, imagesrcset, imagesizes, type должны совпадать с реальным ресурсом, иначе можно скачать не то или скачать дважды. 3. Не повышайте приоритет всем картинкам above the fold Типичный анти-паттерн: <img src="/slide-1.avif" fetchpriority="high"> <img src="/slide-2.avif" fetchpriority="high"> <img src="/slide-3.avif" fetchpriority="high"> Если виден только первый слайд — high должен быть только у него. Остальные: loading="lazy" или обычный auto. 4. Опускайте второстепенное, но аккуратно fetchpriority="low" может быть полезен для изображений, которые браузер обнаруживает рано, но которые не нужны для первого экрана: декоративные картинки, hidden-состояния, неактивные слайды. <img src="/promo-secondary.avif" fetchpriority="low" loading="lazy" alt=""> Но не ставьте low на ресурсы, которые могут стать LCP на других брейкпоинтах. Иначе на mobile можно случайно замедлить именно главный ресурс. 5. Не лечите fetchpriority то, что сломано архитектурно Если LCP плохой из-за: — огромного JS до первого рендера; — CSS, блокирующего отображение; — неверного sizes; — слишком тяжёлого hero; — позднего SSR/streaming; — client-only рендера над hero; то fetchpriority="high" даст ограниченный эффект. Он управляет очередью загрузки, но не чинит сам критический путь. Production-чеклист: — Найдите реальный LCP через field data, а не только Lighthouse. — Проверьте разные viewport’ы: mobile/desktop могут иметь разные LCP. — Ставьте high максимум на 1–2 ресурса первого экрана. — Не повышайте приоритет preload’ов «на всякий случай». — Проверяйте waterfall: не вытеснили ли вы CSS, font или critical JS. — Сравнивайте p75 LCP до/после, а не один локальный прогон. — Раскатывайте по маршрутам: главная, листинг, карточка могут требовать разных hints. Хороший fetchpriority в production — это не «сделать быстрее всё». Это явно сказать браузеру: «вот этот ресурс сейчас определяет LCP, остальные пусть не мешают».	1 036
3	🔍Тестовое собеседование с руководителем Frontend-разработки в этот четверг 18 июня(в четверг!) в 19:00 по мск приходи онлайн на открытое собеседование, чтобы посмотреть на настоящее интервью на Middle Frontend-разработчика. Как это будет: 📂 Виталий Черков, руководитель группы Frontend разработки с опытом 8+ лет, будет задавать реальные вопросы и задачи разработчику-добровольцу 📂 Виталий будет комментировать каждый ответ респондента, чтобы дать понять, чего от вас ожидает собеседующий на интервью 📂 В конце можно будет задать любой вопрос Виталию Это бесплатно. Эфир проходит в рамках менторской программы от ШОРТКАТ для Frontend-разработчиков, которые хотят повысить свой грейд, ЗП и прокачать скиллы. Переходи в нашего бота, чтобы получить ссылку на эфир → @shortcut_front_bot Реклама. О рекламодателе.	1 570
4	⁣⁣🔐 Координация вкладок через BroadcastChannel и Web Locks: refresh токенов без гонок Классическая проблема SPA с несколькими вкладками: 1. Access token истёк. 2. Пользователь открывает 3 вкладки. 3. Все вкладки одновременно получают 401. 4. Все делают /auth/refresh. 5. Если refresh token ротируется — первая вкладка обновила его, остальные уже пришли со старым refresh token. 6. Итог: logout, invalid_grant, странные баги авторизации. Решение: сделать refresh single-flight на весь origin. Для этого удобно совместить два API: - Web Locks — гарантирует, что refresh выполняет только одна вкладка. - BroadcastChannel — быстро сообщает остальным вкладкам результат refresh. Идея простая: - каждая вкладка перед refresh пытается взять lock; - внутри lock обязательно повторно проверяет, не обновил ли токен кто-то другой; - после успешного refresh рассылает новый access token/метаданные в остальные вкладки; - остальные вкладки обновляют своё состояние и не делают лишний refresh. Пример: const channel = new BroadcastChannel('auth'); let accessToken: string \| null = null; let accessTokenExp = 0; const REFRESH_LOCK = 'auth-refresh-lock'; const SKEW = 30_000; function isAccessTokenFresh() { return accessToken && accessTokenExp - Date.now() > SKEW; } function applySession(session: { accessToken: string; accessTokenExp: number; }) { accessToken = session.accessToken; accessTokenExp = session.accessTokenExp; } channel.onmessage = (event) => { const message = event.data; if (message.type === 'auth:refreshed') { applySession(message.session); } if (message.type === 'auth:refresh-failed') { accessToken = null; accessTokenExp = 0; } }; async function refreshSession() { const response = await fetch('/auth/refresh', { method: 'POST', credentials: 'include', }); if (!response.ok) { throw new Error('Refresh failed'); } return response.json(); } export async function getAccessToken() { if (isAccessTokenFresh()) { return accessToken; } return navigator.locks.request( REFRESH_LOCK, { mode: 'exclusive' }, async () => { // Пока мы ждали lock, // другая вкладка уже могла обновить токен. if (isAccessTokenFresh()) { return accessToken; } try { const session = await refreshSession(); applySession(session); channel.postMessage({ type: 'auth:refreshed', session, }); return accessToken; } catch (error) { channel.postMessage({ type: 'auth:refresh-failed', }); throw error; } }, ); } Что здесь важно: 1. Lock должен быть общим для всех вкладок одного origin Например: auth-refresh-lock. 2. Проверка свежести токена должна быть дважды До lock — быстрый путь. Внутри lock — защита от очереди вкладок, которые ждали, пока первая завершит refresh. 3. BroadcastChannel не заменяет состояние Он не хранит последнее сообщение. Если вкладка открылась позже, она не получит старый auth:refreshed. Поэтому при старте всё равно нужно восстанавливать состояние: из memory/cache, через /session, silent refresh или другой механизм приложения. 4. Refresh token лучше не хранить в JS Оптимальный вариант — refresh token в HttpOnly Secure SameSite cookie, а /auth/refresh вызывается с credentials: 'include'. 5. Не забывайте про fallback BroadcastChannel поддерживается широко, но Web Locks есть не везде. Для критичных продуктов нужен fallback: mutex через localStorage с TTL или перенос refresh-логики в SharedWorker/Service Worker, если архитектура позволяет.	1 463
5	CSS Anchor Positioning — это то, чего давно не хватало для тултипов, поповеров и меню: привязка одного элемента к другому на уровне CSS, без ручного расчёта координат в JS. Раньше типичный flow был такой: 1. getBoundingClientRect() 2. посчитать top / left 3. записать inline-стили 4. пересчитать при scroll / resize / zoom / изменении контента 5. случайно получить layout thrashing Особенно неприятно, когда таких тултипов десятки, они живут в порталах, попадают в top layer или должны флипаться при нехватке места. CSS Anchor Positioning решает именно эту задачу: элемент объявляется «якорем», а другой элемент позиционируется относительно него. Минимальный пример: <button class="help" popovertarget="tip"> ? </button> <div id="tip" popover class="tooltip"> Подсказка без JS-позиционирования </div> .help { anchor-name: --help; } .tooltip { position: absolute; position-anchor: --help; inset-block-start: anchor(block-end); inset-inline-start: anchor(center); translate: -50% 8px; margin: 0; padding: 8px 12px; border-radius: 8px; background: #111; color: white; } Что здесь происходит: - .help становится anchor-элементом через anchor-name - .tooltip привязывается к нему через position-anchor - anchor(block-end) берёт нижнюю границу кнопки - anchor(center) берёт горизонтальный центр кнопки - translate добавляет смещение для красивого отступа JS при этом может заниматься только поведением: открыть / закрыть поповер, обработать action, синхронизировать состояние. Но не измерять DOM и не писать координаты. В этом и главная ценность: positioning переезжает туда, где ему место — в layout engine браузера. Почему это важно для производительности: - меньше getBoundingClientRect() в рантайме - меньше forced reflow - меньше resize / scroll listeners - меньше кастомной логики для пересчёта позиции - проще работать с Popover API и top layer - меньше зависимости от тяжёлых positioning-библиотек там, где нужна простая привязка Для сложных кейсов вроде dropdown-меню, context menu или rich tooltip всё ещё могут понадобиться fallback-стратегии, collision handling и прогрессивное улучшение. Но базовый сценарий «показать элемент около другого элемента» наконец-то становится декларативным. Практический вывод: если вы сейчас используете JS только для того, чтобы положить tooltip под кнопку, стоит присмотреться к связке: - Popover API — для поведения и top layer - CSS Anchor Positioning — для координат - JS — только для бизнес-логики, а не layout-математики Это не полная замена Floating UI / Popper во всех сценариях, но очень сильный нативный primitive, который закрывает большой пласт повседневных задач без layout thrashing.	1 756
6	Совет на ближайшие годы — изучайте ВАЙБ-КОДИНГ ИИ уже пишет код, чинит баги, генерирует тесты, документацию и помогает запускать продукты быстрее, чем это делали классические команды разработки. И это уже не "будущее когда-нибудь", а реальность, которая меняет рынок уже сегодня И те, кто научится вайбкодить сейчас, будут увереннее конкурировать на рынке и зарабатывать больше тех, кто по-прежнему делает всё вручную. Стартовать с нуля поможет канал Вайб-кодинг. Там ребята круглосуточно мониторят более 320 российских и зарубежных источников и публикуют только главное: релизы, инструменты, гайды, курсы и практические кейсы. Подписывайтесь, нас уже 45 тысяч: @vibecoding_tg	1 929
7	⁣AsyncLocalStorage в Node.js: request-scoped контекст для логов, трассировки и транзакций без prop drilling В production это нужно в Node.js-сервисах, SSR, API integration и backend-for-frontend слоях, где requestId, traceId, tenant или транзакция должны проходить через async-код. Частая ошибка - протаскивать ctx через десятки методов или, наоборот, прятать в нём бизнес-состояние. Как это выглядит AsyncLocalStorage использует async_hooks и привязывает store к async execution flow: promise, timeout, I/O callback и большинству стандартных API Node.js. type Ctx = { requestId: string; traceId?: string; tx?: unknown }; const als = new AsyncLocalStorage<Ctx>(); app.use((req, _res, next) => { als.run({ requestId: req.headers['x-request-id']?.toString() ?? randomUUID(), traceId: req.headers.traceparent?.toString(), }, next); }); const getCtx = () => als.getStore(); function logInfo(msg: string, meta = {}) { const c = getCtx(); logger.info({ requestId: c?.requestId, traceId: c?.traceId, ...meta, }, msg); } Теперь сервисный код не знает про HTTP middleware и req, но логи автоматически получают correlation metadata. Транзакции без протаскивания tx Для DB слоя можно делать withTransaction(), который запускает als.run({ ...ctx, tx }, fn), а getDbExecutor() возвращает ctx.tx ?? db. Trade-off хороший: меньше шума в API сервисов, но граница ответственности остаётся инфраструктурной, а не бизнесовой. Где границы * не заменяйте аргументы функции: бизнес-данные передавайте явно; * не кладите в store req, res, большие payload или ORM graph; * context не пересекает process boundary: worker threads, очереди, cron jobs и другие сервисы требуют явной передачи ids; * нестандартные callback-based библиотеки могут разорвать async chain. Практическое правило: используйте AsyncLocalStorage для логов, tracing, tenant/user metadata, аудита и текущей транзакции, а не для скрытого глобального состояния. Вывод: AsyncLocalStorage полезен, когда request-scoped инфраструктурный контекст улучшает observability и DX, но не размывает явные границы бизнес-логики.	1 988
8	АЙТИШНИКИ БЕСПЛАТНОЕ ОБУЧЕНИЕ сборник курсов, инструментов и книг Проект «TERMINAL» стал крупнейшей библиотекой бесплатного образования. В одном канале собраны курсы, книги, полезные инструменты и практические тренажёры для всех разработчиков 🎓 Практические курсы и задания 🪽 Книги и статьи известных авторов 😮‍💨 Полезные инструменты и ресурсы 🌟 IT-новости и инсайды Обучение по всем направлениям: SQL, Python, Frontend, PHP, C++, Golang, GIT, Linux, QA, Java, Vibe-coding, Infosec и др. Ценишь знания, подпишись: Terminal_tg	1 998
9	AbortSignal.any() и AbortSignal.timeout(): единая отмена fetch, таймеров и async-операций в production Promise.race([fetch(), timeout]) часто маскирует проблему: ждать перестали, но работа могла не остановиться. В SPA, SSR, Node.js-сервисах, SDK и API clients это приводит к висящим запросам, таймерам и retry/backoff ниже по стеку. Собирайте отмену вокруг AbortSignal AbortSignal.timeout(ms) сам отменится по таймауту. AbortSignal.any([...signals]) отменится, когда отменится любой входной signal. Так в один контракт попадают: * caller отменил операцию * истек timeout * клиент закрыл соединение * сервис уходит в graceful shutdown const shutdown = new AbortController(); async function loadUser(id: string, opts: { signal?: AbortSignal } = {}) { const signal = AbortSignal.any([ AbortSignal.timeout(1500), shutdown.signal, ...(opts.signal ? [opts.signal] : []), ]); signal.throwIfAborted(); const res = await fetch(`https://api.example.com/users/${id}`, { signal }); await sleep(100, signal); // backoff тоже отменяем const data = await res.json(); signal.throwIfAborted(); return data; } Типичная ошибка Не останавливайтесь на fetch. Один и тот же signal стоит передавать в retry, polling, очереди, sleep/timer helpers и свои async-функции. Иначе верхний слой "отменился", а нижний продолжает держать ресурсы. Практические нюансы * AbortSignal одноразовый: если aborted === true, нужен новый controller или timeout * AbortSignal.any() - это fan-in, а не fan-out: он не отменяет исходные контроллеры * смотрите на reason: timeout часто дает TimeoutError, abort - AbortError или ваш reason * при обертках над setTimeout, stream, listener или socket чистите ресурсы при abort Вывод: Отмена должна быть частью контракта async-функции, а не локальным Promise.race на краю системы.	2 594
10	Нейросети, IT и AI — в одной папке 💬 С коллегами собрали новые каналы про: 💠 промпты для нейросетей и готовые решения 💠 AI-фотосессии, генерация изображений и контента 💠 новости искусственного интеллекта без лишнего шума 💠 применение AI в работе, бизнесе и повседневной жизни 💠 Python, JavaScript, Data Science и системный анализ 💠 вакансии и возможности для специалистов в IT Посмотреть и подписаться тут 👉 https://t.me/addlist/c_rbhnzprbAwMmFi 💌 Добавить свой канал в папку	1 891
11	Страшная тайна российского айти ✖️ xCode Journal	3 110
12	Хватит гадать — DeepSeek за тебя уже всё решил 🐳 * Сейчас все только про Claude, но я перешёл на DeepSeek и не жалею. Бесплатно, контекст 1 млн токенов — закинул целую книгу, помнит всё. Код пишет отлично, а рассуждения (Reasoning) выдают логику, как у архитектора. Решил протестировать агентский режим на задаче, которую вечно откладывал — собрать чистое инфополе с нуля. Чтобы не перебирать паблики вручную, зашёл через функцию похожих каналов в Telegram. Скормил DeepSeek ссылки на качественных авторов по IT и AI, которых читаю сам, и попросил проанализировать сотни рекомендаций. Агент изучил контент на каналах и оставил только тех, кто делится практическим опытом по: AI-воркфлоу, автоматизации, вайб-кодингу, промт-инжинирингу, RAG-syst. нейрогенерации и др. DeepSeek собрал полезную подборку экспертов в одну папку. Делюсь списком — внутри только полезный контент про IT & AI. 🔗Забирай в один клик: 👉 https://t.me/addlist/FYyQj91I8jJiMzg0	2 348
13	Диктовка для Mac вместо клавиатуры Кодишь с Claude/Cursor и устал печатать промпты и сообщения? Зажал горячую клавишу, сказал - текст сам встал туда, где курсор. В любом приложении: редактор, браузер, мессенджер. - отдельная русская модель: распознаёт русский с пунктуацией, тянет смесь рус/англ-терминов - распознавание локально, на твоём маке - голос не уходит в облако, в отличие от облачных сервисов - от 290 ₽/мес - дешевле зарубежных аналогов - оплата картой РФ, без VPN и зарубежных карт macOS, Apple Silicon 🎁 Промокод FNOTES - месяц Pro бесплатно! → www.taptalk.team/	2 412
14	⁣Variadic tuple types — сложные сигнатуры без боли До variadic tuple types многие сложные сигнатуры в TypeScript выглядели как наказание. Особенно: 👉 curry 👉 compose 👉 middleware 👉 typed event emitter 👉 любые функции с «прокинь аргументы дальше» Приходилось писать overload на overload и дублировать типы вручную. Как было раньше Обычно появлялись: 👉 overload на overload 👉 ручные tuple-типы 👉 тонны дублирования Типы быстро превращались в нечитаемую простыню. Что изменили variadic tuples С их появлением стало намного проще работать с остаточными аргументами на уровне типов. Например: type Fn<T extends unknown[]> = (...args: [...T]) => void Или собирать сигнатуры: type Append<Args extends unknown[], Arg> = [...Args, Arg] Типы наконец научились нормально работать с «переменным количеством аргументов». Почему это важно На практике это одна из тех TS-фич, которые реально упростили жизнь библиотекам. Без variadic tuples: 👉 Redux middleware typings 👉 router APIs 👉 compose/curry utilities были бы ещё страшнее. Где начинается тёмная магия Проблемы начинаются, когда variadic tuples комбинируют с: 👉 infer 👉 recursive types 👉 conditional types Типовая система очень быстро превращается в тёмный лес. IDE начинает тормозить, ошибки становятся нечитаемыми, а compile time — расти. Главная мысль Variadic tuple types — это действительно мощная фича. Главное — вовремя остановиться и не превратить типы в отдельный язык программирования.	2 973
15	Стажировки и вакансии для JavaScript разработчиков - Вакансии которых нет на джоб-агрегаторах - Только прямые контакты HR в Telegram @jobs_js_fronted для фронтов @jobs_js_back для бека Пока другие листают джоб-сайты — ты уже пишешь HR в Telegram.	2 171
16	🤣 Не баг, а фича ✖️ xCode Journal	4 321
17	Мой код после сотен правок и костылей	4 936
18	⁣ES2025: Импорт JSON-файлов как модулей Введение С выходом ECMAScript 2025 (ES2025) разработчики получили возможность напрямую импортировать JSON-файлы как модули в JavaScript-коде. Это упрощает работу с конфигурационными данными и другими статическими ресурсами, представленными в формате JSON. Синтаксис импорта JSON-модулей Для импорта JSON-файла используется ключевое слово import с указанием атрибута with { type: 'json' }. Это гарантирует, что импортируемый файл будет обработан как JSON-модуль. Пример использования Рассмотрим пример импорта конфигурационного файла config.json и обращения к его свойствам в коде. import config from './config.json' with { type: 'json' }; .log(config.apiUrl); // Выводит значение свойства apiUrl из config.json console.log(config.timeout); // Выводит значение свойства timeout из config.json ❗️Добавление поддержки импорта JSON-файлов как модулей в ES2025 упрощает работу с данными в формате JSON, делая код более чистым и понятным. Источники JSON Modules Can Now Be Imported in JavaScript in All Modern Browsers, CSS Modules to Follow. New Features in ES2025 – BooleanBuffer.	5 553
19	Стажировки и вакансии для JavaScript разработчиков - Вакансии которых нет на джоб-агрегаторах - Только прямые контакты HR в Telegram @jobs_js_fronted для фронтов @jobs_js_back для бека Пока другие листают джоб-сайты — ты уже пишешь HR в Telegram.	1 879
20	⁣Recursive type limits — почему TS иногда «умирает» В TypeScript можно написать тип, который выглядит красиво, но заставляет компилятор страдать. Особенно когда начинаются рекурсивные типы. Например: 👉 глубокий DeepPartial 👉 парсинг строк на уровне типов 👉 сложные conditional types 👉 infer внутри infer На маленьком примере всё работает. В реальном проекте IDE внезапно начинает думать по 5 секунд. Почему так происходит TypeScript не вычисляет типы «бесплатно». Каждый: 👉 conditional type 👉 union 👉 recursive шаг нужно реально посчитать. А если тип разворачивается слишком глубоко, компилятор упирается в лимиты. Отсюда знакомое: Type instantiation is excessively deep and possibly infinite И это не всегда баг TypeScript. Часто это сигнал, что типовая модель стала слишком умной. Где обычно всё ломается Особенно опасны: 👉 рекурсивные mapped types 👉 огромные union’ы 👉 type-level parser’ы 👉 deeply nested generics 👉 utility types поверх utility types Типы начинают взрываться комбинаторно. Что обычно помогает 👉 не делать type-level акробатику без нужды 👉 ограничивать глубину рекурсии 👉 разбивать типы на более простые 👉 добавлять явные промежуточные типы 👉 не тащить сложные generic-типы в публичный API Почему это важно Сложные типы бьют не только по компиляции. Они ухудшают: 👉 autocomplete 👉 responsiveness IDE 👉 читаемость кода 👉 onboarding новых людей Иногда самый дорогой runtime — это compile time. Главная мысль Хороший TypeScript — это не когда типы поражают воображение. Хороший TypeScript — это когда их можно понять через полгода, а IDE при этом не превращается в обогреватель.	4 181

View all posts