Дуги движения (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

Laravel 13.13 получил небольшое, но полезное улучшение для очередей.

Появился метод Bus::bulk(), который позволяет отправлять множество jobs одним вызовом.

Раньше для этого обычно использовали foreach и вызывали dispatch() для каждой задачи отдельно. Проблема в том, что каждый такой вызов создавал отдельную запись в базе данных или Redis.

1000 jobs → 1000 операций записи

Bus::bulk() работает иначе. Вместо поштучной отправки Laravel сохраняет задачи пакетами, что заметно снижает количество операций записи и уменьшает нагрузку на очередь.

Одна из тех фич, которые ничего не меняют в API приложения, но становятся очень полезными, когда объём задач начинает измеряться тысячами.

@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

Жёстко прописанный CSS для tooltip работает ровно до тех пор, пока tooltip не упирается в край экрана.
Плохой вариант, tooltip обрезается:

position: absolute;
left: 100%;
transform: translateY(-50%);

Хороший вариант, с учётом коллизий:

измерить свободное место во viewport
выбрать placement
задать top/left
переместить стрелку
запустить анимацию из правильной точки origin

@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

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

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

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

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

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

@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

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

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

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

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

Вышел 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

Команды Kubernetes

@WebDev_Plus

Если ты веб-разработчик и юзаешь ИИ… ставь это!

Agent Skills от Addy Osmani (Google) для:

✓ Веб‑производительности
✓ Лучших практик
✓ Доступности (Accessibility)
✓ SEO

Для React, Vue, Angular, Astro или чего угодно.

$ npx add-skill addyosmani/web-quality-skills

@WebDev_Plus