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

Фиксация сессии в PHP: если после входа пользователя не сменить идентификатор сессии, злоумышленник может заранее навязать жертве свой PHPSESSID, а после её авторизации получить доступ к уже аутентифицированной сессии. Исправляется одной строкой:

session_regenerate_id(true);

Вызывать её нужно сразу после успешного логина. Параметр true здесь важен: он удаляет старый файл сессии. Если вызвать просто:

session_regenerate_id();

старый идентификатор останется валидным на диске. В таком случае заранее украденный или навязанный до авторизации cookie всё ещё может использоваться для доступа к старой сессии. Большинство современных фреймворков выполняют ротацию идентификатора сессии автоматически, но при работе с чистым PHP это нужно делать самостоятельно. @WebDev_Plus

Кто сказал, что запуск больших моделей локально обязательно должен быть тяжёлым и раздутым? Shimmy — это односоставный бинарник на Rust размером всего 5 МБ, который явно бросает вызов Ollama. Что обещает проект: → один исполняемый файл размером 5 МБ → запуск примерно за 100 мс → потребление памяти около 50 МБ → 100% совместимость с OpenAI API Если Ollama кажется слишком громоздким, а запускать локальные модели всё равно хочется — стоит присмотреться к Shimmy. https://github.com/Michael-A-Kuykendall/shimmy @WebDev_Plus

15 мощных расширений для Chrome для разработчиков, дизайнеров и создателей контента Loom — расширение для записи экрана, которое позволяет быстро записывать видео с экрана вместе с голосовыми комментариями и делиться ими. Grammarly — ИИ-помощник для письма, который проверяет грамматику, орфографию, тон и читаемость текста прямо во время набора. ColorZilla — инструмент для выбора цветов, позволяющий определять и копировать цвета с любых веб-страниц. WhatFont — помогает быстро определить, какие шрифты используются на сайте. Site Palette — генерирует цветовую палитру любого сайта для поиска дизайнерских референсов и вдохновения. GoFullPage — делает полноразмерные скриншоты страниц без необходимости прокручивать их вручную. Page Ruler — измеряет ширину и высоту элементов страницы в пикселях. Lightshot — инструмент для быстрых скриншотов с возможностью редактирования и мгновенного обмена изображениями. Imageye — находит все изображения на странице и позволяет быстро скачать их. Responsive Viewer — помогает разработчикам проверять, как сайт выглядит на разных размерах экранов и устройствах. CSS Viewer — показывает CSS-свойства элементов страницы при наведении курсора. Web Developer — набор инструментов для веб-разработки, встроенный прямо в браузер. JSON Viewer — форматирует и отображает JSON в удобном для чтения структурированном виде. Lighthouse — автоматизированный инструмент от Google для анализа производительности сайта, доступности, SEO и соответствия лучшим практикам. Wappalyzer — определяет технологии, фреймворки, CMS и другие инструменты, на которых построен сайт. @WebDev_Plus

🆕 Представлен MDN MCP Server! Теперь документацию MDN и данные о совместимости браузеров можно подключить напрямую к AI-агенту или IDE и получать точные, актуальные ответы по веб-платформе. Больше не нужно полагаться на устаревшие знания из обучающих данных модели. Что даёт MDN MCP Server: • прямой доступ к документации MDN; • актуальные данные о поддержке API и веб-стандартов в браузерах; • меньше галлюцинаций при работе с веб-разработкой; • возможность использовать свежую информацию прямо в AI-агентах и редакторах кода. Полезная штука для тех, кто использует Claude Code, Codex, Cursor и другие MCP-совместимые инструменты при веб-разработке. @WebDev_Plus

Твои AI API могут упасть. Лимиты запросов могут закончиться. Но приложение не обязано останавливаться из-за этого. В #Laravel AI SDK достаточно передать массив провайдеров в аргумент provider. Если основной API недоступен, Laravel автоматически переключится на следующий провайдер в списке. Никакой кастомной логики ретраев писать не нужно. 👇 @WebDev_Plus

Нашёл 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