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

В приложении Codex можно переносить чаты в проекты и обратно, ссылаться на другой чат через @ или просто перетащить его в поле ввода, а также попросить один чат отправить сообщение другому от вашего имени. В том числе сообщить ему, что ананасу не место на пицце. 🍍

Google запустила инструмент, о котором разработчики просили годами. Он называется CodeWiki. Вы вставляете любой репозиторий, а ИИ автоматически превращает его в интерактивную документацию. Он не просто делает краткое описание кода: • автоматически генерирует диаграммы • объясняет, как работает каждая часть • создаёт пошаговые руководства • определяет архитектуру и зависимости • и даже добавляет чат-бота, который понимает всю кодовую базу По сути, он превращает проекты, в которых практически невозможно разобраться, в то, по чему любой разработчик может начать нормально ориентироваться за несколько минут. https://codewiki.google/

Один пользователь попросил своего агента сделать качественный конвертер PNG в SVG и дал ему пару сайтов как ориентир по качеству. Он пытался минут 15–20, результат не понравился, они ещё немного поспорили. А потом он сделал вот что. Он решил, что лучший результат даёт VectorMagic, разобрал работу их веб-приложения и WebSocket-соединения, использовал функцию предпросмотра и собрал инструмент, который незаметно отправляет всю реальную конвертацию на серверы VectorMagic. 😋

Проверяйте доступность возможностей веб-платформы прямо в Lighthouse → https://goo.gle/3TXx3cO Теперь в разделе Best Practices отображается статус Baseline, в том числе: 🌐 Возможности с широкой поддержкой 🛠 Недавно ставшие доступными возможности ⚠️ Код с ограниченной поддержкой

CSS только что убил ещё одну JavaScript-библиотеку. CSS Grid Lanes, он же Masonry, уже здесь. И самое неожиданное — первой поддержку получила Safari 26.4+. Вот и всё, что теперь нужно. ▼ Больше никакого Masonry.js, хрупких костылей на Flexbox и ручного расчёта позиций в JavaScript. Чистый CSS нативно собирает классическую раскладку в стиле Pinterest или «водопада». В Chrome, Edge и Firefox поддержка пока доступна только за флагом.

Больше не нужно вручную копировать результаты проваленных проверок 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

Уже очевидно, что ВАЙБКОДИНГ — главный навык ближайших лет Посмотрите сами. ИИ уже забирает на себя работу целых команд: пишет код, закрывает задачи джунов и позволяет стартапам запускать продукты в 2–3 раза меньшим составом. То, на что раньше нужны были несколько разработчиков, сегодня всё чаще делает один человек с ИИ-агентами. И это только начало. Те, кто освоит вайбкодинг сейчас, смогут быстрее запускать проекты, автоматизировать огромный объём работы, увереннее конкурировать на рынке и зарабатывать больше тех, кто продолжает делать всё вручную. Начать с нуля поможет канал Вайб-кодинг. Там ребята круглосуточно мониторят более 320 российских и зарубежных источников и публикуют только главное: релизы, инструменты, гайды, курсы и практические кейсы. Подписывайтесь, нас уже 50 тысяч: @vibecoding_tg

Помните об этом при использовании /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