This media is not supported in your browser
VIEW IN TELEGRAM
Бро… этот open-source дизайн-скилл для AI делает интерфейсы, сгенерированные AI, гораздо менее шаблонными. 😍
Hallmark — это дизайн-скилл для Claude Code, Cursor и Codex, который помогает AI генерировать интерфейсы, выглядящие как результат осознанной дизайн-работы, а не как типичный AI-вывод.
Он умеет:
→ создавать красивые новые UI
→ проводить аудит существующего дизайна
→ редизайнить страницы, сохраняя ваш контент
→ анализировать URL или скриншот и извлекать из них дизайн-ДНК
Если вы разрабатываете приложения с помощью AI, это точно стоит попробовать :)
@WebDev_Plus
Hallmark — это дизайн-скилл для Claude Code, Cursor и Codex, который помогает AI генерировать интерфейсы, выглядящие как результат осознанной дизайн-работы, а не как типичный AI-вывод.
Он умеет:
→ создавать красивые новые UI
→ проводить аудит существующего дизайна
→ редизайнить страницы, сохраняя ваш контент
→ анализировать URL или скриншот и извлекать из них дизайн-ДНК
Если вы разрабатываете приложения с помощью AI, это точно стоит попробовать :)
@WebDev_Plus
Мои любимые AI-модели на этой неделе
Простые задачи → GPT 5.6 Luna Max
Повседневная разработка → GPT 5.6 Sol Medium
Сложные задачи → GPT 5.6 Sol Max
Баланс качества и скорости → Grok 4.5
Создание интерфейсов и UI → Claude Fable 5
Поиск уязвимостей и задачи по безопасности → Fable 5
Крупные рефакторинги → Claude Opus 4.8
Игры и 3D-проекты → Kimi K3
Лучшая открытая модель → Kimi K3
@WebDev_Plus
Простые задачи → GPT 5.6 Luna Max
Повседневная разработка → GPT 5.6 Sol Medium
Сложные задачи → GPT 5.6 Sol Max
Баланс качества и скорости → Grok 4.5
Создание интерфейсов и UI → Claude Fable 5
Поиск уязвимостей и задачи по безопасности → Fable 5
Крупные рефакторинги → Claude Opus 4.8
Игры и 3D-проекты → Kimi K3
Лучшая открытая модель → Kimi K3
@WebDev_Plus
Media is too big
VIEW IN TELEGRAM
Если вы разрабатываете сайты на React, не пренебрегайте мелкими деталями.
Amicro — это готовая библиотека микроинтеракций, которая добавляет hover-эффекты, трансформации иконок, переходы между состояниями и интерактивные анимации, благодаря которым интерфейс выглядит более профессионально.
Главное преимущество — вам не нужно создавать все эти детали с нуля. Библиотека подходит для лендингов, SaaS-продуктов и AI-инструментов.
https://amicro.vercel.app/
@WebDev_Plus
Amicro — это готовая библиотека микроинтеракций, которая добавляет hover-эффекты, трансформации иконок, переходы между состояниями и интерактивные анимации, благодаря которым интерфейс выглядит более профессионально.
Главное преимущество — вам не нужно создавать все эти детали с нуля. Библиотека подходит для лендингов, SaaS-продуктов и AI-инструментов.
https://amicro.vercel.app/
@WebDev_Plus
Чёрт… эта open-source альтернатива Figma выглядит невероятно круто.
Она умеет открывать, редактировать и сохранять нативные файлы Figma в формате
→ Встроенного ИИ-ассистента
→ Совместную работу в реальном времени
→ Поддержку MCP
→ Экспорт дизайна в код
→ Кроссплатформенную поддержку
А самое главное — проект полностью с открытым исходным кодом.
Он всё ещё находится в активной разработке, но за ним определённо стоит следить :)
Источник: github.com/open-pencil/open-pencil
@WebDev_Plus
Она умеет открывать, редактировать и сохранять нативные файлы Figma в формате
.fig, а также предлагает:→ Встроенного ИИ-ассистента
→ Совместную работу в реальном времени
→ Поддержку MCP
→ Экспорт дизайна в код
→ Кроссплатформенную поддержку
А самое главное — проект полностью с открытым исходным кодом.
Он всё ещё находится в активной разработке, но за ним определённо стоит следить :)
Источник: github.com/open-pencil/open-pencil
@WebDev_Plus
Совет по TypeScript: используйте переназначение ключей, чтобы выбирать или исключать свойства по типу.
#TypeScript
@WebDev_Plus
#TypeScript
@WebDev_Plus
WTF???... Люди реально превращают Telegram в «бесконечное» облачное хранилище. 🤯
Такое ощущение, будто об этом вообще незаконно знать… но кто-то действительно создал open-source приложение, которое позволяет использовать свой Telegram-аккаунт как персональный облачный диск.
Возможности:
→ Загрузка файлов через drag-and-drop
→ Стриминг видео и аудио
→ Встроенный просмотрщик PDF
→ Превью файлов
→ Ссылки для скачивания, которыми можно делиться
→ Поддержка Windows, macOS, Linux и Android
Самое интересное: файлы хранятся прямо в вашем Telegram-аккаунте, а приложение не зависит от сторонних серверов :)
Исходники 🔗: github.com/caamer20/Telegram-Drive
@WebDev_Plus
Такое ощущение, будто об этом вообще незаконно знать… но кто-то действительно создал open-source приложение, которое позволяет использовать свой Telegram-аккаунт как персональный облачный диск.
Возможности:
→ Загрузка файлов через drag-and-drop
→ Стриминг видео и аудио
→ Встроенный просмотрщик PDF
→ Превью файлов
→ Ссылки для скачивания, которыми можно делиться
→ Поддержка Windows, macOS, Linux и Android
Самое интересное: файлы хранятся прямо в вашем Telegram-аккаунте, а приложение не зависит от сторонних серверов :)
Исходники 🔗: github.com/caamer20/Telegram-Drive
@WebDev_Plus
При работе с JSONB знали ли вы, что следующие запросы функционально эквивалентны, но используют разные индексы?
Оба проверяют, что по пути
B-tree индекс по выражению, использует операторы сравнения:
GIN-индекс, использует операторы вхождения:
@WebDev_Plus
Оба проверяют, что по пути
user.city находится значение "Denver", но первый использует извлечение значения по пути и оператор сравнения, а второй — оператор вхождения.B-tree индекс по выражению, использует операторы сравнения:
data->'user'->>'city' = 'Denver'
GIN-индекс, использует операторы вхождения:
data @> '{"user": {"city": "Denver"}}'@WebDev_Plus
This media is not supported in your browser
VIEW IN TELEGRAM
Оооо... это слишком круто. 🤯
Это расширение для VS Code позволяет рисовать прямо внутри редактора — буквально делать наброски мышкой или стилусом.
Идеально подходит для:
* быстрого прототипирования идей;
* планирования архитектуры всего проекта перед написанием кода;
* создания майнд-карт для сложных концепций;
* набросков UI/UX-сценариев.
И всё это без необходимости покидать редактор кода. Очень удобно, особенно во время брейнштормов или созвонов с клиентами :)
@WebDev_Plus
Это расширение для VS Code позволяет рисовать прямо внутри редактора — буквально делать наброски мышкой или стилусом.
Идеально подходит для:
* быстрого прототипирования идей;
* планирования архитектуры всего проекта перед написанием кода;
* создания майнд-карт для сложных концепций;
* набросков UI/UX-сценариев.
И всё это без необходимости покидать редактор кода. Очень удобно, особенно во время брейнштормов или созвонов с клиентами :)
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
⚡️ TypeScript: превращаем карту объектов в discriminated union с помощью mapped types
#TypeScript
@WebDev_Plus
#TypeScript
@WebDev_Plus
This media is not supported in your browser
VIEW IN TELEGRAM
Чувак… это чертовски полезно 🤯
Сайт в духе швейцарского ножа для разработчиков и дизайнеров.
Внутри собрана коллекция небольших инструментов, которые работают прямо в браузере и распределены по разным категориям. Никакой регистрации, трекинга или сбора данных.
Стоит добавить в закладки, особенно если любите быстрые инструменты без лишней ерунды — просто открыл и пользуешься :)
Источник: tools.rmv.fyi
@WebDev_Plus
Сайт в духе швейцарского ножа для разработчиков и дизайнеров.
Внутри собрана коллекция небольших инструментов, которые работают прямо в браузере и распределены по разным категориям. Никакой регистрации, трекинга или сбора данных.
Стоит добавить в закладки, особенно если любите быстрые инструменты без лишней ерунды — просто открыл и пользуешься :)
Источник: tools.rmv.fyi
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Кто-то создал слой памяти для AI-агентов, который заменяет весь стек с векторной базой данных одним файлом.
Проект называется memvid.
Один файл
Результат на LoCoMo для долговременного запоминания диалогов на 35% выше текущего SOTA. Поиск занимает меньше миллисекунды даже при масштабировании. Решение полностью работает офлайн, не привязано к конкретной модели и напрямую интегрируется с Claude Code.
Файл можно закоммитить в Git, передать через
Полностью бесплатно и с открытым исходным кодом.
@WebDev_Plus
Проект называется memvid.
Один файл
.mv2 хранит данные, эмбеддинги, поисковый индекс и метаданные. Без SQLite, ChromaDB и отдельного сервера. Приложение просто открывает файл, читает или записывает данные, а затем закрывает его.Результат на LoCoMo для долговременного запоминания диалогов на 35% выше текущего SOTA. Поиск занимает меньше миллисекунды даже при масштабировании. Решение полностью работает офлайн, не привязано к конкретной модели и напрямую интегрируется с Claude Code.
Файл можно закоммитить в Git, передать через
scp или отправить кому-то по почте. Вся память переносится как единый артефакт.Полностью бесплатно и с открытым исходным кодом.
@WebDev_Plus
Не позволяйте своим дизайнам выглядеть как типичный AI-slop.
Этот скилл для Claude Code, Cursor и Codex находит характерные паттерны AI-сгенерированного дизайна и помогает добиваться более уникального результата.
Также ему можно передавать референсы с других сайтов:
→ [https://github.com/Nutlope/hallmark]
@WebDev_Plus
Этот скилл для Claude Code, Cursor и Codex находит характерные паттерны AI-сгенерированного дизайна и помогает добиваться более уникального результата.
Также ему можно передавать референсы с других сайтов:
→ [https://github.com/Nutlope/hallmark]
@WebDev_Plus
Anthropic полностью обновила свой официальный бесплатный курс по Claude Code.
Теперь он включает 10 уроков, новые видео и итоговый экзамен.
https://anthropic.skilljar.com/claude-code-in-action
@WebDev_Plus
Теперь он включает 10 уроков, новые видео и итоговый экзамен.
https://anthropic.skilljar.com/claude-code-in-action
@WebDev_Plus
This media is not supported in your browser
VIEW IN TELEGRAM
Для геймдева: разработчик выложил в опенсорс свой набор skills для разработки игр на Three.js.
С их помощью можно собрать изометрическую action RPG с управлением камерой, VFX, звуком, ассетами монстров, боевой системой и другими игровыми механиками.
Всё доступно бесплатно:
Skills:
https://github.com/MengTo/Skills
Демо игры:
https://vesperfall.mengto.chatgpt.site
Каталог игровых ассетов:
https://vesperfall.mengto.chatgpt.site/asset-catalog
@WebDev_Plus
С их помощью можно собрать изометрическую action RPG с управлением камерой, VFX, звуком, ассетами монстров, боевой системой и другими игровыми механиками.
Всё доступно бесплатно:
Skills:
https://github.com/MengTo/Skills
Демо игры:
https://vesperfall.mengto.chatgpt.site
Каталог игровых ассетов:
https://vesperfall.mengto.chatgpt.site/asset-catalog
@WebDev_Plus
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