WebDev+ | Веб-разработка
8.07K subscribers
582 photos
274 videos
10 files
770 links
Присоединяйтесь к нашему каналу и погрузитесь в мир веб-разработки

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

https://goo.gle/4vSx6nw
This media is not supported in your browser
VIEW IN TELEGRAM
Открытая 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
This media is not supported in your browser
VIEW IN TELEGRAM
Этот жидкий эффект для интерфейсов выглядит почти гипнотически.

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

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

https://gooey.jakubantalik.com
This media is not supported in your browser
VIEW IN TELEGRAM
В WebStorm появился Chrome DevTools Connect.

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

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

[https://goo.gle/4i2wPuL]
This media is not supported in your browser
VIEW IN TELEGRAM
Больше не нужно вручную копировать результаты проваленных проверок 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, в том числе:

🌐 Возможности с широкой поддержкой
🛠 Недавно ставшие доступными возможности
⚠️ Код с ограниченной поддержкой
This media is not supported in your browser
VIEW IN TELEGRAM
Один пользователь попросил своего агента сделать качественный конвертер PNG в SVG и дал ему пару сайтов как ориентир по качеству. Он пытался минут 15–20, результат не понравился, они ещё немного поспорили.

А потом он сделал вот что.

Он решил, что лучший результат даёт VectorMagic, разобрал работу их веб-приложения и WebSocket-соединения, использовал функцию предпросмотра и собрал инструмент, который незаметно отправляет всю реальную конвертацию на серверы VectorMagic. 😋
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Google запустила инструмент, о котором разработчики просили годами.

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

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

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

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

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

https://codewiki.google/
This media is not supported in your browser
VIEW IN TELEGRAM
В приложении Codex можно переносить чаты в проекты и обратно, ссылаться на другой чат через @ или просто перетащить его в поле ввода, а также попросить один чат отправить сообщение другому от вашего имени.

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

https://github.com/markmanx/isoflow
Посмотрите последние обновления DevTools в Chrome 151.

Появились подсказки по специфичности CSS, улучшена отладка памяти JavaScript и обновлены готовые профили для эмуляции устройств.

https://bit.ly/4x6YmQE
This media is not supported in your browser
VIEW IN TELEGRAM
Это нереально.

Qwen 3.8 27B, запущенная локально на моей RTX 5090, ОБГОНЯЕТ Opus 4.8 в моих бенчмарках.

Что забавно, Opus 4.6 она немного проигрывает.

Скорость такая же хорошая, а иногда НАМНОГО выше. В некоторых тестах я получал до 200 токенов/с.

Мы живём уже в другом мире. Безлимитный бесплатный суперинтеллект прямо у нас на столе.

Никакого интернета, подписок или API.

Всего полгода назад для четверти такой производительности вам понадобилось бы 500 ГБ VRAM.

А теперь я получаю интеллект уровня Opus 4.8 на одной RTX 5090. Даже Spark не нужен.

Теперь эта модель работает у меня внутри Hermes-агента, который выполняет задачи для меня 24/7 бесплатно.

У меня НОЛЬ сомнений, что к этому времени в следующем году на Mac mini будут работать модели мощнее Fable. НОЛЬ сомнений.

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

Будущее уже не за углом. Оно здесь.
This media is not supported in your browser
VIEW IN TELEGRAM
В Claude Code добавили новый навык /design.

Он запускает редактор Claude Design и публикует визуальный дизайн с несколькими артбордами в виде Artifact.

Артборды в формате .dc.html размещаются на одном полотне, которое можно свободно перемещать и масштабировать. По сути, это отдельная среда внутри Claude Code для быстрых черновиков интерфейсов и визуальных концептов.
Hand Drawn Arrows — набор из 55 рисованных вручную стрелочек для ваших дизайнов в Figma.
Этот репозиторий на GitHub собрал больше 1000 бесплатных публичных API практически на любой случай.

Финансы, погода, карты, музыка, игры, машинное обучение, крипта, транспорт, наука, безопасность и десятки других категорий — всё собрано в одном месте.

Полезная штука, если нужен готовый API для пет-проекта, прототипа или тестирования идеи.

https://github.com/public-apis/public-apis
This media is not supported in your browser
VIEW IN TELEGRAM
Больше не нужно писать сложный JavaScript, чтобы элементы форм вроде textarea подстраивались под введённый текст 🍝

CSS-свойство field-sizing теперь входит в Baseline и позволяет элементам форм автоматически менять размер в зависимости от содержимого.

Документация → https://goo.gle/4a1HJMM
Если сайт загружается слишком долго, велика вероятность, что пользователь просто уйдёт.

Чтобы ускорить загрузку, Алекс собрал отдельное руководство.

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

https://freecodecamp.org/news/speed-up-website-loading/
Please open Telegram to view this post
VIEW IN TELEGRAM