В 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

Angular 22 теперь с собственным AI Agent Skill.

Установил один раз — и любой кодирующий агент сразу понимает:

✅Лучшие практики Angular 22
✅ Signals и Signal Forms
✅ Standalone Components
✅ Zoneless Angular
✅ Современная архитектура Angular
✅ Кодинг-конвенции Angular

Теперь агент думает как эксперт по Angular, а не просто генерирует общий код.
Установка:

npx angular-cli-ai install-skill

AI эффективен только в контексте.
Для максимума подключите Angular 22 MCP Server и включите экспериментальные devserver задачи.

#Angular #Angular22 #AI #ClaudeCode #TypeScript #WebDev

@WebDev_Plus

Привет, Laravel-разработчики

Начиная с Laravel v13.15.0, во фасаде Cache появился новый метод rememberWithState().
По сути, этот метод делает две вещи.
Сначала он проверяет, существует ли указанный ключ в кэше. Если ключ найден, метод просто возвращает сохранённое значение. Если ключа нет, выполняется callback, а его результат сохраняется в кэше под этим ключом.
Это полностью совпадает с поведением существующего метода remember().

Но у rememberWithState() есть дополнительная возможность: вместе со значением он возвращает булевый флаг (true или false), который показывает, было ли значение уже в кэше или оно было сгенерировано только что.
Один из полезных сценариев применения — отправка клиенту собственного HTTP-заголовка с информацией о статусе кэша.
Например, можно явно указывать, был ли ответ получен из кэша (cache hit) или сформирован заново (cache miss).

#laravel #php

@WebDev_Plus

Следующий урок, который мы усвоили при масштабной эксплуатации Laravel Scout:
Если в Scout включены очереди, индексация моделей выполняется через фоновые задачи, которые ставятся в очередь при вызове $model->save().

В нагруженных приложениях могут возникать две ситуации:
одна и та же модель может сохраняться несколько раз за короткий промежуток времени;
очередь Scout может накапливаться, пока воркеры постепенно обрабатывают задачи.

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

Это создаёт лишнюю нагрузку, поскольку во время обработки задачи актуальная версия модели заново загружается из базы данных. В итоге каждая дублирующаяся задача повторно получает и индексирует одно и то же финальное состояние модели.
Чтобы решить эту проблему, я отправил PR (который был принят), добавляющий две новые задачи, которые можно включить по желанию. Они реализуют интерфейс ShouldBeUniqueUntilProcessing, который не позволяет ставить в очередь задачи для моделей, уже ожидающих индексации в очереди.

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

@WebDev_Plus

Когда в Node.js появляются тяжёлые вычислительные задачи, производительность приложения может заметно просесть.

Из-за этого многие делают вывод, что Node.js плохо подходит для таких сценариев или что проблема в самом JavaScript. Но решение есть.

В этом руководстве от Sumit Saha подробно разбирается многопоточность в Node.js с помощью Worker Threads.

Что внутри:

* зачем нужны Worker Threads;
* чем они отличаются от Event Loop;
* как выносить CPU-intensive задачи в отдельные потоки;
* обмен данными между потоками;
* практические примеры и паттерны использования.

Хороший материал для тех, кто хочет использовать все возможности Node.js и не блокировать основной поток тяжёлыми вычислениями.

https://freecodecamp.org/news/how-to-implement-multi-threading-in-nodejs-with-worker-threads-full-handbook/

@WebDev_Plus

Этот инструмент проверяет производительность всего сайта.

Он сканирует все страницы и выставляет оценку каждой из них.
Что-то вроде Lighthouse, но с обзором всего сайта целиком.

Запуск:

npx unlighthouse --site <ваш-сайт>

@WebDev_Plus

Хочешь, чтобы твой AI-агент на Laravel использовал недорогую Gemini для простых диалогов, а при сложных задачах автоматически переключался на более мощную модель Claude?
Тогда стоит использовать динамическое переключение моделей
Переопределить модель по умолчанию можно прямо внутри метода prompt().

@WebDev_Plus