🎹 Вдруг если вам не хватает внимательности во время кодинга.

🤬 У Cloudflare случился сбой в работе из-за бага в useEffect.

🤬 Я однажды находил баг в проде из-за подобной проблемы.

P.S. бесят эти массивы зависимостей. С ними надо быть аккуратнее.

👩‍💻 ESLint плагин, который позволяет словить ненужные useEffect'Ы

💡 На Linkedin в поиске введите We're hiring frontend и увидите посты, где ищут Frontend разработчиков.

🔥 URLPattern стал доступен во всех браузерах

❓Зачем он нужен?

URLPattern позволяет удобно разбирать и матчить URL без регулярных выражений и ручного парсинга.

Раньше

const url = new URL(location.href);
const pathRegex = /^\/users\/([a-zA-Z0-9]+)\/?$/;
const isMatch = pathRegex.test(url.pathname);

Сейчас

const pattern = new URLPattern({ pathname: "/users/:id" });
const isMatch = pattern.test(location.href);

🥇 TypeScript - самый популярный инструмент для программирования на GitHub в 2️⃣0️⃣2️⃣5️⃣ году. Он сместил с первого места Python. На третьем месте JavaScript.

😨 Если говорить про рост числа разработчиков на GitHub, то только за 2025 год из Индии их прибавилось 5.2 миллион.

🔗 Ознакомиться с полной статистикой можно тут.

⚡️ Navigation API теперь поддерживается во всех браузерах

После выхода Firefox 147 можно считать, что Navigation API стал baseline-фичей веба.
Это новый нативный слой для клиентской навигации, который со временем должен упростить жизнь роутерам.

🛑Было
SPA-роутинг годами строился на History API (pushState, popstate) и куче обвязки вокруг него.
React Router, Vue Router, Angular Router — всё это по сути сложные абстракции над history.

🛑Стало
Navigation API даёт нативные события навигации, перехват переходов, отмену, lifecycle и более предсказуемую работу back/forward.

Многие вещи, которые раньше делали библиотеки, теперь появляются на уровне браузера. Это сильно облегчает разработку и поддержку библиотек, над чем упорно и трудится сообщество, чтобы у нас, у конечных разрабов, была возможность разрабатывать крутые и надежные проекты.

🛑Поддержка во фреймворках
🛑React — нативной поддержки пока нет, роутеры всё ещё на History API
🛑Vue — аналогично, официальной интеграции нет
🛑Angular — есть экспериментальная поддержка через withExperimentalPlatformNavigation()

Почитать можно тут:
🛑 Chrome.com
🛑 MDN

🛑Подпишись, чтобы не пропустить.

🤔 Что же это такое? Бросаем Next JS и переходим на TanStack Start?

В доке TanStack есть даже пошаговый гайд для этого.

Кто там пишет на Next, что происходит? Не скажу, что меня это как-то огорчило, т.к. мне почему-то никогда Next не нравился. Я пару раз попробовал на нем поделать проекты, но не зашло.

🛑Подпишись, чтобы не пропустить.

⚡️ State of JavaScript 2025 - Результаты опроса

🔤 Что популярно

🛑Синтаксис, ключевые слова и другие возможности языка
1️⃣Оператор нулевого слияния (??)
2️⃣Динамический импорт
3️⃣Приватные поля класса

🛑Методы строк
1️⃣string.replaceAll()
2️⃣string.matchAll()
3️⃣Регулярные выражения - hasIndices

🛑Методы массивов
1️⃣array.toSorted()
2️⃣array.toReversed()
3️⃣array.findLast()

🛑Асинхронные возможности
1️⃣Promise.allSettled()
2️⃣Promise.any()
3️⃣Ничего

🛑Браузерный API
1️⃣WebSocket
2️⃣Progressive Web Apps
3️⃣Geolocation API

🛑Сложности в работе с JavaScript
1️⃣Отсутствие нативной типизации
2️⃣Работа с датами и временем
3️⃣Поддержка TypeScript

Почитать можно тут:
🛑 State of JavaScript - 2025

🛑Подпишись, чтобы не пропустить.

😨 Современный CSS против старого

🏗 Вот сайт, где есть множество наглядных примеров того, как это делалось раньше и как делают сейчас. Наконец-то не придется бегать по интернету и собирать все по кусочкам.

🛑Подпишись, чтобы не пропустить.

⚔️ Утечки памяти в Frontend. Результаты анализа

🪞 Здесь речь идет о уязвимых точках, которые мы сами создаем, когда забываем очистить таймеры, слушатели событий, подписки, и т.д.

📊 Я наткнулся на результаты анализа, который был проведен совсем недавно в рамках 😮 500 репозиториев (React, Vue, Angular) и оставлю основные результаты ниже.

🔤Просканировано 714 217 файлов. Обнаружено 55 864 мест с утечкой памяти. В 430 из 500 репозиториев был обнаружен хотя бы один такой сценарий.

🔤 Главные виновники
1️⃣setTimeout & setInterval
2️⃣addEventListener
3️⃣subscribe
4️⃣useEffect
5️⃣watch

🧠 Это в очередной раз говорит нам о том, чтобы мы не забывали о таких вещах.

Почитать можно тут:
🛑 Frontend Memory Leaks

🛑Подпишись, чтобы не пропустить.

🔤Все больше и больше компаний отказываются от Next JS в пользу TanStack.

😨 Очередной пример - Railway, где я лично держу свой сервак, тоже перешел на TanStack Start.

Почитать можно тут:
🛑 Moving Railway's Frontend Off Next.js

🛑Подпишись, чтобы не пропустить.

💡 Небольшой лайфхак с использованием React ключей, о котором начинающие разработчики могут не знать.

📱 Снял для этого shorts и показал на примере:
https://www.youtube.com/shorts/gDTbpkxqHG0

🛑Подпишись, чтобы не пропустить.

🪄 Как начать чувствовать себя волшебником в JS, а не бухгалтером, сводящим копейки???
Завезли Math.sumPrecise, который принимает массив чисел и возвращает их сумму.

✏️ Помните типикал задачку на курсах по программированию, в частности по JS, где нужно вывести сумму чисел массива через FOR или REDUCE?

Вот как это теперь выглядит:

const nums = [1, 2, 3, 4, 5];

Math.sumPrecise(nums); // 15

Почитать можно тут:
🛑 Math.sumPrecise()

🛑Подпишись, чтобы не пропустить.

😡 Опять РИАКТ виноват

👌 «Код был идеальным». Пока не пришло 20 000 пользователей

История от Aral Roca: команда задеплоила фичу во вторник, а в четверг API начал падать с таймаутами.
Latency: 80ms ➡️ 14 секунд. 📈

🔍 В чём была проблема?

Всего 3 строки кода, которые прошли код-ревью без вопросов:

const results = users.map(user => {
  const match = permissions.find(p => p.userId === user.id);
  return { ...user, role: match?.role ?? 'viewer' };
});

✅ Чисто. Читаемо. Функционально.
❌ Но это O(n × m) ➡️ в их случае O(n²)

💁‍♂ Математика боли:
🛑200 пользователей = 40 000 сравнений
🛑2 000 пользователей = 4 000 000 сравнений
🛑20 000 пользователей = 400 000 000 сравнений

👁 Решение — одна строка:

const permMap = new Map(permissions.map(p => [p.userId, p.role]));
const results = users.map(user => ({
  ...user,
  role: permMap.get(user.id) ?? 'viewer',
}));

⌨️ Кстати, как у вас там код поживает? Есть что пооптимизировать?
😄 «Оптимизировать код — как чистить зубы:
все знают, что надо, но делают только после того, как "заболит"»

Почитать можно тут:
🛑The O(n^2) Bug That Looked Like Clean Code

🛑Подпишись, чтобы не пропустить.

🤖 Эпоха «вайб-кодинга»: как ИИ переписал React Compiler и Bun за считаные дни

1️⃣React Compiler заговорил на Rust 🦀

🛑Оригинальный компилятор написан на TypeScript. Но индустрия требует скоростей, поэтому тулинг переезжает на Rust.
🛑Команда React выкатила PR #36173 с полным портом на Rust.
🛑Итог: код трансформируется в 10 раз быстрее.
🛑Архитектуру строили люди, но большую часть кода сгенерировал ИИ под присмотром инженеров.

2️⃣Anthropic переписала Bun... за 6 дней! 😰

🛑Bun создавался на Zig. Но после покупки проекта компанией Anthropic (создатели Claude) рантайм решили избавить от утечек памяти.
🛑К тому же создатель Zig запретил коммитить ИИ-код в свой язык, а Anthropic на этом буквально живет.
🛑Решение: выкатили PR #30412. ИИ-агенты за 6 дней сделали 6700+ коммитов и переписали 1 МИЛЛИОН строк кода на Rust. Переписанный Bun сразу прошел 99.8% тестов!

🤔 Но есть нюанс...Claude не стал менять архитектуру, а перенес управление памятью из Zig «в лоб». Код усыпан тысячами блоков unsafe. В Твиттере шутят: «ИИ переписал всё за 6 дней, но людям понадобится вечность, чтобы понять этот код».

💰 Про токены: Anthropic могут себе это позволить — просто включили Claude на безлимит из своего кармана. Нам, простым смертным, за попытку переписать легаси на Rust силами LLM пришел бы счет размером с бюджет небольшой страны. 😭

☕️ Что в итоге? Перенос гигантских систем на другой язык стал задачей «на выходные». Скорость пугает и восхищает. А вы готовы доверить нейросети переписать свой проект на другой стек? 👇

Вот пулл-реквесты:
🛑 [compiler] Port React Compiler to Rust
🛑 Rewrite Bun in Rust

🛑Подпишись, чтобы не пропустить.

😨 Релиз TypeScript 7.0 RC: компилятор переписан на 👩‍💻 и ускорен в 10 раз

Мелкософт выпустила Release Candidate TypeScript 7.0 — один из самых значительных релизов в истории языка. Компилятор полностью переписан с TypeScript на 👩‍💻, что дало колоссальный прирост производительности.

🔤Главные изменения:

⚡️ Скорость:
🛑Компилятор работает в 10 раз быстрее благодаря 👩‍💻 и многопоточности;
🛑Новый --watch режим портирован с Parcel — стабильнее и легче для ресурсов;
🛑Языковой сервер в 👩‍💻 VS Code стал в 20 раз стабильнее (меньше сбоев).

🚀 Многопоточность:
🛑--checkers (по умолчанию 4 потока для проверки типов);
🛑--builders (параллельная сборка монорепозиториев);
🛑--singleThreaded (для дебага).

⚔ Для полноценного тестирования нужно сделать следующее:
🛑Для разработки в 👩‍💻 VS Code — достаточно расширения TypeScript Native Preview;
🛑Для продакшн-тестирования — обязательно установите typescript@rc в проект;
🛑Для CI/CD — пока не обновляйте, дождитесь стабильного релиза.

Почитать можно тут:
🛑 Announcing TypeScript 7.0 RC

🛑Подпишись, чтобы не пропустить.

💥 Ирония года: Создатели Cursor перевели свой редактор с Solid на React, потому что ИИ плохо пишет на Solid

✏️ Популярный AI-редактор Cursor практически завершил миграцию своей кодовой базы с Solid.js на React (а заодно ушел с Tailwind на StyleX). Самое интересное здесь — причины, о которых рассказала Principal Engineer проекта Лорен Тан. Их две, и обе заставляют задуматься:

1⃣Проблема «сигналов» на больших масштабах. В крупных и сложных приложениях signal-based подход таит в себе ловушки. Стоит ошибиться, и реактивность вызывает лавинообразный эффект, который рушит производительность.

2️⃣Гравитация обучающих данных AI. Модели ИИ банально плохо пишут на Solid.js. ИИ путает похожий синтаксис, некорректно трекает зависимости, из-за чего сгенерированный код постоянно тормозит. С React таких проблем нет: база знаний у моделей огромная, а овер-рендеринг теперь эффективно закрывает React Compiler.

🤖 При этом сам перенос разработчики сделали... руками своего же AI-агента! Тот за 3 недели перелопатил проект, сделав +266k / -193k строк кода.

☕ Вывод: Как бы ни был хорош инструмент технологически, в эпоху ИИ побеждает тот фреймворк, на котором сгенерировано больше всего обучающих датасетов. React снова победил за счет массы.

🛑Подпишись, чтобы не пропустить.