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

Команды Kubernetes

@WebDev_Plus

Вышел Chrome 149 DevTools.

Что нового:
- Agent Walkthrough и Copy to Coding Agent в AI Assistance
- Автодополнение CSS на базе Gemini прямо во вкладке Styles
- Инструменты для отладки WebMCP в панели Application
- DevTools for Agents 1.0 с поддержкой пользовательских инструментов

Похоже, DevTools всё активнее адаптируют под агентный сценарий работы.
Теперь браузерные инструменты помогают не только разработчику, но и ИИ-агенту: можно передавать контекст, подключать инструменты, отлаживать MCP-интеграции и ускорять цикл «изменил → проверил → исправил».

Подробнее:
https://goo.gle/4v55cVT

@WebDev_Plus

Совет по дизайн-инжиринг:

Отделяйте объект от его тени.
Когда элемент приподнимается над поверхностью, тень не обязана двигаться вместе с ним. Если оставить тень на месте и постепенно уменьшать её интенсивность по мере удаления объекта, можно добиться более убедительного ощущения глубины и физичности.

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

const card = document.querySelector(".notification");
const shadow = document.querySelector(".shadow");

card.animate(
  [
    { transform: "translateY(0)" },
    { transform: "translateY(-160px)" },
  ],
  {
    duration: 900,
    easing: "cubic-bezier(.64,0,.78,0)"
  }
);

shadow.animate(
  [
    { opacity: 0.5, transform: "scaleX(1)" },
    { opacity: 0, transform: "scaleX(.35)" },
  ],
  {
    duration: 700,
    easing: "ease-out"
  }
);

@WebDev_Plus

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

Достаточно добавить в корень проекта файл .mcp.json:

{
  "mcpServers": {
    "angular-cli": {
      "command": "npx",
      "args": [
        "-y",
        "@angular/cli",
        "mcp",
        "--experimental-tool",
        "devserver"
      ]
    }
  }
}

Сервер Angular CLI MCP пока находится в экспериментальном статусе.

После подключения агенты вроде Claude Code получают доступ к инструментам Angular CLI и могут:
- запускать dev-сервер Angular
- останавливать dev-сервер
- выполнять команды Angular CLI
- ждать завершения сборки

По сути агент становится участником цикла разработки:

внести изменения
собрать проект
обнаружить ошибки
исправить ошибки
повторить цикл

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

@WebDev_Plus

Модальные окна могут сдвигать страницу по горизонтали.

Почему:
блокируется прокрутка body
исчезает полоса прокрутки
ширина области контента меняется

Плохо:
открыли модалку → overflow: hidden → центр страницы сместился

Хорошо:
заранее зарезервировали место под скроллбар или компенсировали его ширину
открыли модалку → заблокировали прокрутку → макет остался на месте

Технически:
использовать scrollbar-gutter: stable
либо задавать padding-inline-end, равный ширине скроллбара
избегать CLS (Cumulative Layout Shift) при блокировке прокрутки для модального окна

@WebDev_Plus

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