📖 Реакт ужасен - книга по Реакт, которую сгенерировал ИИ

😲 На удивление точная (и забавная!) книга о React, созданная с помощью искусственного интеллекта Claude. Я одновременно оскорблён и впечатлён. Тон книги немного токсичный, так что воспринимайте её осторожно.

📕 React is Awful

▶️Залетайте завтра в 16:00 на стрим. Будет веб и мобилка

https://www.youtube.com/live/1yAi3cq2Nxw

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

🤬 У 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()

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

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