WebDev+ | Веб-разработка
前往频道在 Telegram
Присоединяйтесь к нашему каналу и погрузитесь в мир веб-разработки Связь: @devmangx
显示更多
网络:8 217
订阅者
+1124 小时
+617 天
+25230 天
帖子存档
Фронтендерам стоит взглянуть на два GitHub-проекта, которые в последнее время быстро набирают популярность.
Оба созданы с одной целью — сделать AI лучше в дизайне интерфейсов.
1. taste-skill
По сути, добавляет для AI дополнительный слой дизайн-ревью.
Перед выдачей результата модель проверяет интерфейс по набору визуальных принципов: иерархия, работа с отступами, ритм, композиция, использование пустого пространства и другие базовые правила дизайна.
Помогает избежать хаотичных цветов, перегруженных экранов и случайных дизайнерских решений.
2. impeccable
Набор из 23 дизайн-команд и подробного гайда по типичным ошибкам AI при создании интерфейсов.
Фокусируется на структуре, адаптивности, анимациях и общей логике построения интерфейсов.
Идея простая:
taste-skill отвечает за визуальный вкус.
impeccable отвечает за структуру и реализацию.
Многие уже используют их вместе как дополнительный слой инструкций для Claude Code, Cursor, Codex и других кодинговых агентов, когда нужно генерировать UI, который выглядит ближе к работе реального дизайнера, а не к очередному шаблонному AI-макету.
https://github.com/Leonxlnx/taste-skill
https://github.com/pbakaus/impeccable
@WebDev_Plus
Жёстко прописанный CSS для tooltip работает ровно до тех пор, пока tooltip не упирается в край экрана.
Плохой вариант, tooltip обрезается:
position: absolute;
left: 100%;
transform: translateY(-50%);измерить свободное место во viewport выбрать placement задать top/left переместить стрелку запустить анимацию из правильной точки origin@WebDev_Plus
У DeepSeek появился полноценный GUI, и это именно тот формат, которого ждали продвинутые пользователи.
Получился локальный desktop-воркспейс для AI-агентов с упором на приватность и работу над реальными проектами.
Что внутри:
• Code Mode — работа с файлами, планирование задач, code review, подтверждение действий и понимание контекста проекта.
• Write Mode — мощный Markdown-редактор со встроенной AI-помощью.
• Kun Runtime — упор на эффективность по токенам благодаря cache-first архитектуре и высокому проценту попаданий в кэш.
• Интеграции с Feishu/Lark/WeChat и фоновые агенты по расписанию.
Работает локально, поддерживает macOS и Windows, а по ощущениям уже напоминает полноценную среду для агентной разработки в духе Codex, а не очередной чат с моделью.
Демо: DeepSeek GUI Demo
@WebDev_Plus
Laravel 13.13 получил небольшое, но полезное улучшение для очередей.
Появился метод
Bus::bulk(), который позволяет отправлять множество jobs одним вызовом.
Раньше для этого обычно использовали foreach и вызывали dispatch() для каждой задачи отдельно. Проблема в том, что каждый такой вызов создавал отдельную запись в базе данных или Redis.
1000 jobs → 1000 операций записи
Bus::bulk() работает иначе. Вместо поштучной отправки Laravel сохраняет задачи пакетами, что заметно снижает количество операций записи и уменьшает нагрузку на очередь.
Одна из тех фич, которые ничего не меняют в API приложения, но становятся очень полезными, когда объём задач начинает измеряться тысячами.
@WebDev_Plus
Дуги движения (motion arcs) зависят в первую очередь от таймингов
.item {
animation-name: cart-x, cart-y;
animation-timing-function:
var(--x-ease), var(--y-ease);
animation-composition: accumulate; /* 👈 */
}
@keyframes cart-x {
to {
translate: var(--x) 0;
}
}animation-composition: accumulate позволяет нескольким анимациям накапливать свои трансформации вместо того, чтобы перезаписывать друг друга.
За счёт этого можно комбинировать независимое движение по горизонтали и вертикали, получая плавные дугообразные траектории без сложной математики и без offset-path.
@WebDev_Plus
ngrok появился в Portless.
Теперь можно публиковать локальные сервисы через интернет, сохраняя постоянные
.localhost URL.
@WebDev_PlusЕсли знаешь Laravel, но хочешь перейти на Go, этот проект может сильно упростить жизнь.
Goravel — веб-фреймворк для Go, который повторяет многие привычные подходы и соглашения Laravel.
Что есть из коробки:
→ Artisan Console для CLI-команд и автоматизации
→ аутентификация через JWT и сессии
→ ORM с model factories для тестов
→ поддержка gRPC-серверов и клиентов
Идея довольно простая: вместо того чтобы учить новый фреймворк с нуля, можно использовать знакомые паттерны Laravel в экосистеме Go
Для PHP-разработчиков выглядит как один из самых комфортных способов зайти в Go без полного переписывания привычного мышления.
https://github.com/goravel/goravel
@WebDev_Plus
Chrome 149 вышел, и в нём наконец-то появилась одна из самых ожидаемых CSS-фич.
Теперь можно стилизовать промежутки (gaps) в CSS Grid и Flexbox.
Это значит, что многие макеты, которые раньше требовали лишних обёрток, псевдоэлементов или хитрых костылей, теперь можно собрать чистым CSS.
Например, внешний вид календаря теперь легко реализуется через CSS Grid с оформленными промежутками между ячейками.
Автор подготовил статью на ICS MEDIA, где разбирает новую возможность, а также приложил демо и исходный код.
Очередной небольшой CSS-апдейт, который убирает ещё один класс фронтенд-костылей.
@WebDev_Plus
👀 React Compiler на Rust: свежий апдейт
Кратко:
• Rust-версия компилятора выдаёт результат, который на 99.9% совпадает с оригинальной реализацией
• Команда уверена в стабильности и планирует влить PR в ближайшие недели
• Уже можно тестировать локально
• Команда Oxc уже работает над интеграцией, есть черновик PR
Похоже, React Compiler скоро получит полноценную Rust-реализацию, что может ускорить сборку и упростить интеграцию с современной экосистемой JavaScript-инструментов.
@WebDev_Plus
Наткнулся на очень годный File Tree-компонент 🌳
Trees — open-source файловое дерево для приложений, которым нужен проводник уровня IDE.
Из коробки есть:
• поиск по файлам
• drag-and-drop
• выделение файлов и папок
• Git-статусы
• горячие клавиши
• всё, что обычно ожидаешь от нормального файлового проводника
Подходит для редакторов кода, девтулзов, файловых менеджеров и любых приложений, где нужно современное дерево файлов.
Выглядит настолько отполированным, будто его вытащили из готовой IDE, а не из очередного npm-пакета.
@WebDev_Plus
Мой набор JavaScript-библиотек, без которых уже сложно представить разработку:
🛡 zod → валидация схем и типобезопасная проверка данных
📅 date-fns → работа с датами без боли и лишнего веса
📊 tanstack-table → мощные и гибкие таблицы для React
🔐 better-auth → аутентификация пользователей без лишней возни
🎞 motion → анимации на JavaScript с современным API
🔤 fontsource → подключение веб-шрифтов прямо через npm
📈 chart.js → доступные и удобные HTML5-графики
🐻 zustand → простое глобальное управление состоянием
🖱 pragmatic-drag-and-drop → drag-and-drop от команды Atlassian
⌨️ hotkeys-js → горячие клавиши и клавиатурные шорткаты
@WebDev_Plus
Кейс большой frontend-миграции от ВКонтакте. Команда перевела ключевые разделы vk.com на SPA. В итоге получили ускорение первой отрисовки страницы на 25% и ускорение среднего времени перехода между разделами в 3,5 раза.
Переход был плавным: снаружи все привычно, внутри — новая платформа
https://www.cnews.ru/news/line/2026-06-03_vkontakte_obnovila_veb-platformu
@WebDev_Plus
Design Engineering Tip
Попробуйте делать
textarea, которая растёт вместе с контентом, вместо вложенного скролла внутри поля.
Так пользователю проще писать длинный текст, а форму легче просматривать целиком.
CSS:
textarea {
field-sizing: content;
}
npm install новый месяц
npm install возможностиОткрой X.
Выполни этот JavaScript в консоли браузера:
s = document.createElement("style");
s.innerHTML = "*{font-family:comic sans ms!important}";
document.head.append(s);
Если хотите, чтобы Claude нормально делал вам слайды, не используйте Claude Design.
Используйте Reveal.js. - https://github.com/hakimel/reveal.js
Пусть Claude генерирует презентации как обычные HTML + Markdown-файлы.
Это намного приятнее:
→ слайды лежат в коде
→ их легко редактировать
→ можно хранить в Git
→ можно версионировать
→ можно быстро менять структуру
→ можно деплоить как обычную веб-страницу
Вместо того чтобы возиться с визуальным редактором, вы просто описываете, какую презентацию хотите получить, а Claude собирает её как фронтенд-проект.
Для разработчиков это ощущается естественнее.
Слайды становятся не «файлом презентации», а частью нормального рабочего процесса.
@WebDev_Plus
#Laravel Tip
Автоматическое удаление записей из коробки 🪄
Иногда нужно автоматически удалять устаревшие записи из базы данных. Многие для этого пишут собственные Artisan-команды и настраивают cron-задачи.
В Laravel для таких случаев уже есть готовое решение — трейт
Prunable.
Достаточно определить условие, какие записи считаются устаревшими:
use Illuminate\Database\Eloquent\Prunable;
class Flight extends Model
{
use Prunable;
public function prunable(): Builder
{
return static::where('created_at', '<=', now()->subMonth());
}
}php artisan model:prune
Блин... Этот визуальный инспектор для React просто шикарен 😍
React Trace от скромного разраба — это инспектор для разработки, который помогает находить React-компоненты, определять их исходные файлы и быстро разбираться в структуре приложения.
→ визуально инспектировать React-компоненты
→ мгновенно переходить к исходному коду компонента
→ понимать иерархию компонентов
→ передавать контекст компонента в AI-инструменты для программирования, такие как OpenCode
С ним отладка и навигация по крупным React-кодовым базам становятся намного проще :)
Исходник 🔗: http://github.com/buzinas/react-trace
@WebDev_Plus
⚡️Типобезопасная работа с формами множественного числа с помощью
Intl.PluralRules и отображаемого типа (mapped type)
@WebDev_Plus