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

Нашёл UI-библиотеку, которая меня прям бесит. Бесит, потому что всё должно работать именно так. Oat: → 6KB CSS + 2.2KB JS → Ноль зависимостей → Не требует фреймворка → Без этапа сборки → Только семантический HTML Пишешь <button> — выглядит хорошо. Пишешь <dialog> — выглядит хорошо. Пишешь <input> — выглядит хорошо. Никакого className="px-4 py-2 rounded-md bg-blue-500" Никаких <Button variant="primary" size="md"> Просто HTML. Доступность из коробки. Поддержка навигации с клавиатуры. Тёмная тема включена. https://github.com/knadh/oat @WebDev_Plus

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

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

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

@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

Следующий урок, который мы усвоили при масштабной эксплуатации Laravel Scout: Если в Scout включены очереди, индексация моделей выполняется через фоновые задачи, которые ставятся в очередь при вызове $model->save(). В нагруженных приложениях могут возникать две ситуации: одна и та же модель может сохраняться несколько раз за короткий промежуток времени; очередь Scout может накапливаться, пока воркеры постепенно обрабатывают задачи. В обоих случаях в очередь попадает множество дублирующихся задач на индексацию одной и той же модели ещё до того, как воркер успеет обработать первую из них. Это создаёт лишнюю нагрузку, поскольку во время обработки задачи актуальная версия модели заново загружается из базы данных. В итоге каждая дублирующаяся задача повторно получает и индексирует одно и то же финальное состояние модели. Чтобы решить эту проблему, я отправил PR (который был принят), добавляющий две новые задачи, которые можно включить по желанию. Они реализуют интерфейс ShouldBeUniqueUntilProcessing, который не позволяет ставить в очередь задачи для моделей, уже ожидающих индексации в очереди. Таким образом, пока задача индексации конкретной модели находится в очереди, новые дублирующиеся задачи для неё создаваться не будут. Это уменьшает количество лишней работы, снижает нагрузку на очередь и сокращает число ненужных операций индексации. @WebDev_Plus

Привет, Laravel-разработчики Начиная с Laravel v13.15.0, во фасаде Cache появился новый метод rememberWithState(). По сути, этот метод делает две вещи. Сначала он проверяет, существует ли указанный ключ в кэше. Если ключ найден, метод просто возвращает сохранённое значение. Если ключа нет, выполняется callback, а его результат сохраняется в кэше под этим ключом. Это полностью совпадает с поведением существующего метода remember(). Но у rememberWithState() есть дополнительная возможность: вместе со значением он возвращает булевый флаг (true или false), который показывает, было ли значение уже в кэше или оно было сгенерировано только что. Один из полезных сценариев применения — отправка клиенту собственного HTTP-заголовка с информацией о статусе кэша. Например, можно явно указывать, был ли ответ получен из кэша (cache hit) или сформирован заново (cache miss). #laravel #php @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

Если ты веб-разработчик и юзаешь ИИ… ставь это! Agent Skills от Addy Osmani (Google) для: ✓ Веб‑производительности ✓ Лучших практик ✓ Доступности (Accessibility) ✓ SEO Для React, Vue, Angular, Astro или чего угодно.

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

@WebDev_Plus

Команды 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