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

Фронтендерам стоит взглянуть на два 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;
  }
}

Суть в том, что траектория движения формируется не только координатами, но и разными функциями плавности по осям X и Y. Свойство 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;
}

Маленькая деталь, но UX сразу становится приятнее. @WebDev_Plus

Определи форму данных. Убери проверки 👇 #TypeScript

npm install новый месяц

npm install возможности

Цитата с верой @WebDev_Plus

Открой X. Выполни этот JavaScript в консоли браузера:

s = document.createElement("style");
s.innerHTML = "*{font-family:comic sans ms!important}";
document.head.append(s);

Наслаждайся. @WebDev_Plus

Если хотите, чтобы 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());
    }
}

После этого Laravel сможет автоматически находить и удалять подходящие записи через команду:

php artisan model:prune

Можно добавить её в планировщик задач и больше не думать об очистке старых данных. Меньше кастомного кода. Меньше поддержки. Больше встроенных возможностей Laravel. @WebDev_Plus

Блин... Этот визуальный инспектор для React просто шикарен 😍 React Trace от скромного разраба — это инспектор для разработки, который помогает находить React-компоненты, определять их исходные файлы и быстро разбираться в структуре приложения. → визуально инспектировать React-компоненты → мгновенно переходить к исходному коду компонента → понимать иерархию компонентов → передавать контекст компонента в AI-инструменты для программирования, такие как OpenCode С ним отладка и навигация по крупным React-кодовым базам становятся намного проще :) Исходник 🔗: http://github.com/buzinas/react-trace @WebDev_Plus

⚡️Типобезопасная работа с формами множественного числа с помощью Intl.PluralRules и отображаемого типа (mapped type) @WebDev_Plus