Вышел Next.js 16.3.

Что нового:

• До 90% меньше потребление памяти в режиме разработки.
• Более быстрые сборка, проверка типов и рендеринг.
• Улучшенные инструменты для ИИ-агентов.
• Пользовательские error boundaries.
• Instant Navigations — мгновенная навигация с отзывчивостью как у SPA.

https://nextjs.org/blog/next-16-3

@WebDev_Plus

Оператор satisfies появился в TypeScript уже несколько лет назад, но в большинстве кодовых баз, которые я открываю, его до сих пор не используют.

Если вы всё ещё проверяете объекты через приведение типа с помощью as, то, возможно, просто вводите компилятор в заблуждение.

Коротко о том, почему satisfies, появившийся в TypeScript 4.9, настолько полезен.

❌ Проблема as
Когда вы используете as, вы фактически говорите TypeScript:

«Не мешай, я знаю, что делаю».

Из-за этого:
типы могут расширяться;
отсутствующие свойства могут остаться незамеченными;
теряются точные литеральные типы значений.

✅ Что даёт satisfies

С satisfies вы говорите TypeScript:

«Проверь, что объект соответствует интерфейсу, но сохрани точные типы значений внутри».

В результате:
проверяется структура объекта;
сохраняется максимально узкий тип;
автодополнение и подсказки IDE остаются точными.

@WebDev_Plus

Распространение пропсов на DOM-элемент кажется безопасным, пока это внезапно не перестаёт быть так.
Кажется, что вы просто передаёте дальше оставшиеся пропсы. Но каждый из них в итоге попадает в ваш div. Атрибуты data, которым там не место. Пропсы, которые вызывают обновления при повторном рендере родителя, даже если фактические данные вашего компонента не изменились.

Этот паттерн коварен, потому что выглядит аккуратно.

Деструктурируйте только те пропсы, которые реально использует компонент. Распространяйте (spread) только то, что должно попасть в DOM. Всё остальное должно останавливаться на границе компонента.

Более чистые элементы, меньше лишних ререндеров и меньше отладки в пятницу вечером.

@WebDev_Plus

Этот сайт просто зверь! Такие ресурсы были бы невероятны для обучения в моё время.

Трёхмерные, интерактивные и живые иллюстрации.

Для анимаций используется Three.js.

Сайт: http://anatomy-livid.vercel.app
Код: http://github.com/thebuggeddev/anatomy

@WebDev_Plus

Передайте рутинную отладку браузера AI-агентам!

Вот как CyberAgent упростили тестирование Storybook:

> Проверяли реальное состояние браузера через DevTools MCP
> Автоматически применяли исправления в коде
> Подтвердили 100% покрытие аудита для 32 компонентов

Подробнее в кейсе → [https://goo.gle/4fTVM94]

@WebDev_Plus

Оптимизация Largest Contentful Paint (LCP) на большом масштабе может напрямую влиять на конверсии в e-commerce.

Nuvemshop убрали lazy loading у изображений, которые находятся в первом экране, и добавили явные приоритеты загрузки для своих настраиваемых тем.

В результате они получили улучшение LCP на 68% и рост конверсий на 8,9%.

→ https://goo.gle/4fRKuDo

@WebDev_Plus

Веб-приложения получили заметное ускорение при вставке из буфера обмена.

До сих пор navigator.clipboard.read() заранее считывал и санитизировал все форматы данных в буфере, из-за чего процессор и память тратились даже на данные, которые приложению вообще не нужны.

Начиная с Chrome и Edge 149, Async Clipboard API переходит на выборочное чтение форматов.

Что меняется: ClipboardItem теперь работает как ленивый дескриптор. Данные фактически считываются и санитизируются только в момент вызова getType().

Результат — ниже задержка, существенно меньше расход памяти и никаких изменений в коде не требуется.

Все подробности и одно важное изменение в поведении:
[https://goo.gle/4wweJFZ]

@WebDev_Plus

Помните об этом при использовании /subtask в Claude Code.

/subtask создаёт форк, который наследует весь текущий диалог:

* тот же системный промпт;
* те же инструменты;
* ту же модель;
* всю историю разговора.

Форк работает в фоне, а в основную сессию возвращается только итоговый результат.

Но если уже внутри этого форка запустить кастомного субагента через @ или Agent Tool, он этот контекст не наследует. Такой агент стартует с нуля и получает только промпт с делегированной задачей.

Именно поэтому я всегда добавляю дополнительную проверку после каждого форка: большинство проблем с потерей контекста возникает на один уровень глубже.

Наследование контекста — отдельное искусство. Самое интересное начинается, когда понимаешь, как он передаётся между разными уровнями запуска.

@WebDev_Plus

Совет по JavaScript для начинающих 💡

const не означает, что значение вообще нельзя изменить.

Если это объект или массив, их содержимое всё ещё можно менять:

const colors = ["red", "blue"];
colors.push("green"); // ✅

Но переприсвоить саму переменную уже нельзя:

colors = ["yellow"]; // ❌

Проще думать о const так: «контейнер заменить нельзя, но его содержимое менять можно».

@WebDev_Plus

Кто-то разобрался, как заменить Opus 5 на DeepSeek V4 Flash в качестве субагента Codex — настройка занимает около трёх минут.

Нужно установить репозиторий model-router, включить для субагентов все выбранные модели — и всё.

@WebDev_Plus

Используйте встроенный Prompt API вместе с Vercel AI SDK, чтобы создавать веб-приложения с ИИ, где модели работают прямо на стороне клиента:

https://goo.gle/4vSx6nw

Открытая VFX-лаборатория на Three.js процедурно запускает прямо в браузере ледяные выбросы, ветвящиеся молнии, падения метеоритов и энергетические лучи.

И всё это можно настраивать в реальном времени через 938 параметров.

https://github.com/achrefelouafi/LinearAbiltyCastingThreeJS

Хотите, чтобы сайт ощущался мгновенным?

<script type="speculationrules"> позволяет заранее отрисовать следующую страницу ещё до того, как пользователь нажмёт на ссылку.

Например, при наведении курсора на неё.

Это веб-стандарт. Обычный HTML. Никаких библиотек.

NVIDIA тоже выпускает модели с открытыми весами.

Nemotron 3.5 Lightning уже доступна бесплатно через OpenRouter.

У модели контекстное окно на 1 млн токенов, а работает она до четырёх раз быстрее. Её создавали для вызова инструментов и выполнения подзадач ИИ-агентов.

https://openrouter.ai/nvidia/nemotron-3.5-lightning:free

Этот жидкий эффект для интерфейсов выглядит почти гипнотически.

На вид как магия, но его можно использовать вполне практично — для кнопок, меню и других компонентов в приложениях и на сайтах.

Попробовать можно здесь:

https://gooey.jakubantalik.com

В WebStorm появился Chrome DevTools Connect.

Теперь ИИ-агент может прямо из IDE открыть Chrome, проверить, как отрисовывается страница, прочитать ошибки в консоли и убедиться, что исправление действительно работает во время выполнения.

То есть цикл «написал код → открыл браузер → посмотрел ошибку → вернулся в IDE» всё больше схлопывается в одно рабочее пространство.

[https://goo.gle/4i2wPuL]

Больше не нужно вручную копировать результаты проваленных проверок Lighthouse из браузера в окно с промптом.

DevTools для агентов теперь позволяет среде самостоятельно находить проблемные участки кода и исправлять их.

Посмотрите, как работает полный замкнутый цикл обратной связи → https://goo.gle/4wY1X38

CSS только что убил ещё одну JavaScript-библиотеку.

CSS Grid Lanes, он же Masonry, уже здесь. И самое неожиданное — первой поддержку получила Safari 26.4+.

Вот и всё, что теперь нужно. ▼

Больше никакого Masonry.js, хрупких костылей на Flexbox и ручного расчёта позиций в JavaScript. Чистый CSS нативно собирает классическую раскладку в стиле Pinterest или «водопада».

В Chrome, Edge и Firefox поддержка пока доступна только за флагом.

Проверяйте доступность возможностей веб-платформы прямо в Lighthouse → https://goo.gle/3TXx3cO

Теперь в разделе Best Practices отображается статус Baseline, в том числе:

🌐 Возможности с широкой поддержкой
🛠 Недавно ставшие доступными возможности
⚠️ Код с ограниченной поддержкой

Google запустила инструмент, о котором разработчики просили годами.

Он называется CodeWiki.

Вы вставляете любой репозиторий, а ИИ автоматически превращает его в интерактивную документацию.

Он не просто делает краткое описание кода:

• автоматически генерирует диаграммы
• объясняет, как работает каждая часть
• создаёт пошаговые руководства
• определяет архитектуру и зависимости
• и даже добавляет чат-бота, который понимает всю кодовую базу

По сути, он превращает проекты, в которых практически невозможно разобраться, в то, по чему любой разработчик может начать нормально ориентироваться за несколько минут.

https://codewiki.google/