WebDev+ | Веб-разработка

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

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

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

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

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

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

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

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

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

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

https://gooey.jakubantalik.com

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

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

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

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

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

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

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

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

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

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

https://github.com/achrefelouafi/LinearAbiltyCastingThreeJS

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

https://goo.gle/4vSx6nw

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

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

@WebDev_Plus

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

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

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

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

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

colors = ["yellow"]; // ❌

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

@WebDev_Plus

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

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

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

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

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

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

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

@WebDev_Plus

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

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

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

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

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

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

@WebDev_Plus

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

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

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

→ https://goo.gle/4fRKuDo

@WebDev_Plus

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

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

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

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

@WebDev_Plus

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

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

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

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

@WebDev_Plus

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

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

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

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

@WebDev_Plus

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

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

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

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

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

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

✅ Что даёт satisfies

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

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

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

@WebDev_Plus

Вышел Next.js 16.3.

Что нового:

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

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

@WebDev_Plus

Совет по TypeScript: как сделать обязательным хотя бы одно из опциональных полей

#TypeScript

@WebDev_Plus

Брооооо, это чертовски круто 🤯

Этот ИИ-скилл помогает кодинг-агентам создавать более красивые интерфейсы.

Taste Skill — опенсорсный скилл, который работает с Claude Code, Codex, Cursor, Gemini CLI, Lovable, v0 и другими популярными агентами. Он помогает избавиться от шаблонного ИИ-дизайна во фронтенде.

Подойдёт разработчикам, вайбкодерам и дизайнерам, которые создают интерфейсы с помощью ИИ и хотят получать более качественный визуальный результат :)

@WebDev_Plus

Официальный плагин OpenArt теперь доступен прямо в ChatGPT.

Описывайте, создавайте, редактируйте и дорабатывайте изображения прямо в чате. 🐸

Для тех, кто не в курсе: OpenArt — платформа для генерации и редактирования изображений и видео с помощью ИИ. В ней собраны разные модели и инструменты для работы с персонажами, анимацией и звуком.