This media is not supported in your browser
VIEW IN TELEGRAM
Представляем
Встроенный компонент для Native SDK.
→ Настоящий shell через PTY
→ Работает на базе
→ Поддержка выделения, scrollback и truecolor
→ Запись терминальных сессий и их офлайн-воспроизведение
Добавьте терминал в свою software factory или оркестратор агентов.
https://github.com/vercel-labs/native
@WebDev_Plus
<terminal />Встроенный компонент для Native SDK.
→ Настоящий shell через PTY
→ Работает на базе
libghostty-vt→ Поддержка выделения, scrollback и truecolor
→ Запись терминальных сессий и их офлайн-воспроизведение
Добавьте терминал в свою software factory или оркестратор агентов.
https://github.com/vercel-labs/native
@WebDev_Plus
This media is not supported in your browser
VIEW IN TELEGRAM
Люблю любые инструменты, которые делают разработку HTML-писем максимально простой.
Эта open-source библиотека предлагает целый набор аккуратно сделанных компонентов для создания адаптивных HTML-писем — без возни с громоздкими таблицами и inline-стилями.
Также здесь есть готовые шаблоны, live preview и поддержка популярных email-провайдеров, поэтому разработка писем ощущается почти так же, как работа над обычным веб-приложением :)
Подписывайтесь — впереди ещё больше материалов про AI, программирование и веб-разработку
@WebDev_Plus
Эта open-source библиотека предлагает целый набор аккуратно сделанных компонентов для создания адаптивных HTML-писем — без возни с громоздкими таблицами и inline-стилями.
Также здесь есть готовые шаблоны, live preview и поддержка популярных email-провайдеров, поэтому разработка писем ощущается почти так же, как работа над обычным веб-приложением :)
Подписывайтесь — впереди ещё больше материалов про AI, программирование и веб-разработку
@WebDev_Plus
Атака через десериализацию
До этого её могла спровоцировать практически любая функция, принимающая путь к файлу:
Stream wrapper разбирал манифест архива и десериализовывал его metadata — даже если в вашем коде вообще не было вызова
При этом Phar определяется не по расширению файла, а по содержимому: движок ищет токен
В PHP 8.0 metadata сделали ленивой: теперь она десериализуется только при явном вызове
Изменение было предложено в RFC Тайсоном Андре.
@WebDev_Plus
phar:// фактически умерла ещё в PHP 8.0 — и это почти никто не заметил. До этого её могла спровоцировать практически любая функция, принимающая путь к файлу:
file_exists(), filesize(), getimagesize() и другие.Stream wrapper разбирал манифест архива и десериализовывал его metadata — даже если в вашем коде вообще не было вызова
unserialize().При этом Phar определяется не по расширению файла, а по содержимому: движок ищет токен
__HALT_COMPILER();. Поэтому файл можно было загрузить даже как avatar.jpg, и он всё равно мог быть распознан и обработан как Phar.В PHP 8.0 metadata сделали ленивой: теперь она десериализуется только при явном вызове
Phar::getMetadata().Изменение было предложено в RFC Тайсоном Андре.
@WebDev_Plus
Получайте больше информации о своих данных прямо в панели AI assistance → [https://goo.gle/4p3oIzA]
Теперь ещё девять виджетов используют данные из разных панелей, чтобы было понятнее, какую информацию Gemini берёт в работу:
- события производительности
- сетевые запросы
- содержимое ресурсов
@WebDev_Plus
Теперь ещё девять виджетов используют данные из разных панелей, чтобы было понятнее, какую информацию Gemini берёт в работу:
- события производительности
- сетевые запросы
- содержимое ресурсов
@WebDev_Plus
Привет, Laravel-разработчики 👩💻
Если вы давно работаете с Laravel, то наверняка знаете про CSRF — подделку межсайтовых запросов.
Но есть ещё SSRF — подделка серверных запросов. Как следует из названия, атака происходит уже на стороне сервера.
Один из распространённых сценариев SSRF возникает, когда сервер использует данные, контролируемые пользователем, для исходящего запроса.
Например, клиент передаёт URL вебхука, а сервер отправляет на него запрос при наступлении какого-либо события.
Атакующий может подставить вредоносный URL, из-за чего сервер обратится к внутренним сервисам, приватным сетям или облачным metadata endpoints, которые недоступны из интернета./
Через SSRF можно получить конфиденциальные данные с сервера, а затем использовать их для дальнейших атак.
Например, утёкший API-токен может открыть доступ к другим чувствительным данным или сервисам.
Недавно я наткнулся на пакет
В примерах ниже показано, как пакет добавляет защиту от SSRF в HTTP-клиент Laravel, запросы через Guzzle и проверку URL, которые передаёт пользователь.
#laravel #php
@WebDev_Plus
Если вы давно работаете с Laravel, то наверняка знаете про CSRF — подделку межсайтовых запросов.
Но есть ещё SSRF — подделка серверных запросов. Как следует из названия, атака происходит уже на стороне сервера.
Один из распространённых сценариев SSRF возникает, когда сервер использует данные, контролируемые пользователем, для исходящего запроса.
Например, клиент передаёт URL вебхука, а сервер отправляет на него запрос при наступлении какого-либо события.
Атакующий может подставить вредоносный URL, из-за чего сервер обратится к внутренним сервисам, приватным сетям или облачным metadata endpoints, которые недоступны из интернета./
Через SSRF можно получить конфиденциальные данные с сервера, а затем использовать их для дальнейших атак.
Например, утёкший API-токен может открыть доступ к другим чувствительным данным или сервисам.
Недавно я наткнулся на пакет
securized/laravel-ssrf, который помогает защищаться от таких атак.В примерах ниже показано, как пакет добавляет защиту от SSRF в HTTP-клиент Laravel, запросы через Guzzle и проверку URL, которые передаёт пользователь.
#laravel #php
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
Google предлагает Email Verification API, который позволит сайтам проверять адрес электронной почты прямо в браузере.
Без отправки письма и без привычного «перейдите по ссылке для подтверждения».
Если API в итоге доберётся до браузеров, одной из самых раздражающих частей регистрации может стать меньше.
@WebDev_Plus
Без отправки письма и без привычного «перейдите по ссылке для подтверждения».
Если API в итоге доберётся до браузеров, одной из самых раздражающих частей регистрации может стать меньше.
@WebDev_Plus
This media is not supported in your browser
VIEW IN TELEGRAM
Chrome DevTools для агентов теперь поддерживает сторонние инструменты разработчика → (https://goo.gle/4wDny0z)
Посмотрите, как команда Angular интегрировала графы времени выполнения:
📈 визуализация графа сигналов
🔌 граф внедрения зависимостей
🎯 точная трассировка ошибок
@WebDev_Plus
Посмотрите, как команда Angular интегрировала графы времени выполнения:
📈 визуализация графа сигналов
🔌 граф внедрения зависимостей
🎯 точная трассировка ошибок
@WebDev_Plus
Привет, Laravel-разработчики 👩💻
При настройке любого Laravel-приложения я обычно переключаю канал логирования на
Канал
Недавно в Laravel появился новый драйвер логирования
#laravel #php
@WebDev_Plus
При настройке любого Laravel-приложения я обычно переключаю канал логирования на
daily.Канал
daily хорошо подходит для крупных приложений, но для небольших это избыточно: при низком объёме логов каждый день будет создаваться слишком много пустых файлов.Недавно в Laravel появился новый драйвер логирования
monthly. Он создаёт отдельный лог-файл на каждый месяц, благодаря чему искать логи и управлять ими становится гораздо проще.#laravel #php
@WebDev_Plus
This media is not supported in your browser
VIEW IN TELEGRAM
Теперь Codex умеет запускать DeepSeek V4 Flash, но официальная настройка заменяет все ваши GPT-модели вместо того, чтобы просто добавить новую.
Codex Router исправляет это. Он добавляет модели в список выбора, а не подменяет их. В итоге Sol, Grok, Kimi и DeepSeek находятся в одном меню, и можно просто выбрать нужную модель под конкретную задачу.
DeepSeek V4 Flash: $0.28 за миллион выходных токенов.
Opus 4.8: $25.
Один и тот же список моделей. Разница в цене — 89 раз.
@WebDev_Plus
Codex Router исправляет это. Он добавляет модели в список выбора, а не подменяет их. В итоге Sol, Grok, Kimi и DeepSeek находятся в одном меню, и можно просто выбрать нужную модель под конкретную задачу.
DeepSeek V4 Flash: $0.28 за миллион выходных токенов.
Opus 4.8: $25.
Один и тот же список моделей. Разница в цене — 89 раз.
@WebDev_Plus
Media is too big
VIEW IN TELEGRAM
Opus 5 пересобрал Pokémon в виде полностью играбельной 3D-игры.
промпт и репо: https://github.com/PauliusOS/pallet-town-3d
@WebDev_Plus
промпт и репо: https://github.com/PauliusOS/pallet-town-3d
@WebDev_Plus
This media is not supported in your browser
VIEW IN TELEGRAM
Официальный плагин OpenArt теперь доступен прямо в ChatGPT.
Описывайте, создавайте, редактируйте и дорабатывайте изображения прямо в чате.🐸
Для тех, кто не в курсе: OpenArt — платформа для генерации и редактирования изображений и видео с помощью ИИ. В ней собраны разные модели и инструменты для работы с персонажами, анимацией и звуком.
Описывайте, создавайте, редактируйте и дорабатывайте изображения прямо в чате.
Для тех, кто не в курсе: OpenArt — платформа для генерации и редактирования изображений и видео с помощью ИИ. В ней собраны разные модели и инструменты для работы с персонажами, анимацией и звуком.
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Брооооо, это чертовски круто 🤯
Этот ИИ-скилл помогает кодинг-агентам создавать более красивые интерфейсы.
Taste Skill — опенсорсный скилл, который работает с Claude Code, Codex, Cursor, Gemini CLI, Lovable, v0 и другими популярными агентами. Он помогает избавиться от шаблонного ИИ-дизайна во фронтенде.
Подойдёт разработчикам, вайбкодерам и дизайнерам, которые создают интерфейсы с помощью ИИ и хотят получать более качественный визуальный результат :)
@WebDev_Plus
Этот ИИ-скилл помогает кодинг-агентам создавать более красивые интерфейсы.
Taste Skill — опенсорсный скилл, который работает с Claude Code, Codex, Cursor, Gemini CLI, Lovable, v0 и другими популярными агентами. Он помогает избавиться от шаблонного ИИ-дизайна во фронтенде.
Подойдёт разработчикам, вайбкодерам и дизайнерам, которые создают интерфейсы с помощью ИИ и хотят получать более качественный визуальный результат :)
@WebDev_Plus
Совет по TypeScript: как сделать обязательным хотя бы одно из опциональных полей
#TypeScript
@WebDev_Plus
#TypeScript
@WebDev_Plus
Вышел Next.js 16.3.
Что нового:
• До 90% меньше потребление памяти в режиме разработки.
• Более быстрые сборка, проверка типов и рендеринг.
• Улучшенные инструменты для ИИ-агентов.
• Пользовательские error boundaries.
• Instant Navigations — мгновенная навигация с отзывчивостью как у SPA.
https://nextjs.org/blog/next-16-3
@WebDev_Plus
Что нового:
• До 90% меньше потребление памяти в режиме разработки.
• Более быстрые сборка, проверка типов и рендеринг.
• Улучшенные инструменты для ИИ-агентов.
• Пользовательские error boundaries.
• Instant Navigations — мгновенная навигация с отзывчивостью как у SPA.
https://nextjs.org/blog/next-16-3
@WebDev_Plus
nextjs.org
Next.js 16.3
Next.js 16.3 introduces Instant Navigations, a suite of tools for single-page-app responsiveness, plus a faster dev server, faster builds, and improved tooling for AI agents.
Оператор
Если вы всё ещё проверяете объекты через приведение типа с помощью
Коротко о том, почему
❌ Проблема
Когда вы используете
Из-за этого:
типы могут расширяться;
отсутствующие свойства могут остаться незамеченными;
теряются точные литеральные типы значений.
✅ Что даёт
С
В результате:
проверяется структура объекта;
сохраняется максимально узкий тип;
автодополнение и подсказки IDE остаются точными.
@WebDev_Plus
satisfies появился в TypeScript уже несколько лет назад, но в большинстве кодовых баз, которые я открываю, его до сих пор не используют.Если вы всё ещё проверяете объекты через приведение типа с помощью
as, то, возможно, просто вводите компилятор в заблуждение.Коротко о том, почему
satisfies, появившийся в TypeScript 4.9, настолько полезен.❌ Проблема
asКогда вы используете
as, вы фактически говорите TypeScript:«Не мешай, я знаю, что делаю».
Из-за этого:
типы могут расширяться;
отсутствующие свойства могут остаться незамеченными;
теряются точные литеральные типы значений.
✅ Что даёт
satisfiesС
satisfies вы говорите TypeScript:«Проверь, что объект соответствует интерфейсу, но сохрани точные типы значений внутри».
В результате:
проверяется структура объекта;
сохраняется максимально узкий тип;
автодополнение и подсказки IDE остаются точными.
@WebDev_Plus
Распространение пропсов на DOM-элемент кажется безопасным, пока это внезапно не перестаёт быть так.
Кажется, что вы просто передаёте дальше оставшиеся пропсы. Но каждый из них в итоге попадает в ваш
Этот паттерн коварен, потому что выглядит аккуратно.
Деструктурируйте только те пропсы, которые реально использует компонент. Распространяйте (
Более чистые элементы, меньше лишних ререндеров и меньше отладки в пятницу вечером.
@WebDev_Plus
Кажется, что вы просто передаёте дальше оставшиеся пропсы. Но каждый из них в итоге попадает в ваш
div. Атрибуты data, которым там не место. Пропсы, которые вызывают обновления при повторном рендере родителя, даже если фактические данные вашего компонента не изменились.Этот паттерн коварен, потому что выглядит аккуратно.
Деструктурируйте только те пропсы, которые реально использует компонент. Распространяйте (
spread) только то, что должно попасть в DOM. Всё остальное должно останавливаться на границе компонента.Более чистые элементы, меньше лишних ререндеров и меньше отладки в пятницу вечером.
@WebDev_Plus
This media is not supported in your browser
VIEW IN TELEGRAM
Этот сайт просто зверь! Такие ресурсы были бы невероятны для обучения в моё время.
Трёхмерные, интерактивные и живые иллюстрации.
Для анимаций используется Three.js.
Сайт: http://anatomy-livid.vercel.app
Код: http://github.com/thebuggeddev/anatomy
@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
Вот как 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
Nuvemshop убрали lazy loading у изображений, которые находятся в первом экране, и добавили явные приоритеты загрузки для своих настраиваемых тем.
В результате они получили улучшение LCP на 68% и рост конверсий на 8,9%.
→ https://goo.gle/4fRKuDo
@WebDev_Plus
Веб-приложения получили заметное ускорение при вставке из буфера обмена.
До сих пор
Начиная с Chrome и Edge 149, Async Clipboard API переходит на выборочное чтение форматов.
Что меняется:
Результат — ниже задержка, существенно меньше расход памяти и никаких изменений в коде не требуется.
Все подробности и одно важное изменение в поведении:
[https://goo.gle/4wweJFZ]
@WebDev_Plus
До сих пор
navigator.clipboard.read() заранее считывал и санитизировал все форматы данных в буфере, из-за чего процессор и память тратились даже на данные, которые приложению вообще не нужны.Начиная с Chrome и Edge 149, Async Clipboard API переходит на выборочное чтение форматов.
Что меняется:
ClipboardItem теперь работает как ленивый дескриптор. Данные фактически считываются и санитизируются только в момент вызова getType().Результат — ниже задержка, существенно меньше расход памяти и никаких изменений в коде не требуется.
Все подробности и одно важное изменение в поведении:
[https://goo.gle/4wweJFZ]
@WebDev_Plus