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

Ты создаёшь отдельные роуты под вебхуки от каждого внешнего сервиса? Сколько бы сервисов ни слали webhook-события, тебе нужен один роут, один контроллер и один менеджер вебхуков. @WebDev_Plus

Мой племянник учится на втором курсе программной инженерии. Позвонил недавно, попросил помочь с поиском стажировки. И среди прочего спросил, где лучше разобраться с Git. Я удивился. На втором курсе студенты всё ещё обходят Git стороной. А потом это бьёт по ним на собеседованиях. Я посоветовал ему отличный гайд от Beej. Он перезвонил сегодня. Полный восторга. Делился впечатлениями. Так что вот, снова рекомендую. Для всех студентов и всех, кто только начинает знакомство с Git. https://beej.us/guide/bggit/ @WebDev_Plus

CSS Tip: Автоматически помечайте внешние ссылки Если ссылка открывается в новой вкладке через target="_blank", можно добавить к ней визуальный индикатор с помощью CSS.

a[target="_blank"]::after {
    content: " ↗️";
}

Преимущества: ✅ Пользователь сразу видит, что ссылка откроется в новой вкладке ✅ Улучшается UX без изменения HTML-разметки ✅ Работает автоматически для всех внешних ссылок с target="_blank" ✅ Не нужно вручную добавлять иконки в каждую ссылку Небольшая деталь, которая делает интерфейс более понятным. #CSS #Frontend #WebDev #UIDesign @WebDev_Plus

Anime.js 4.5 уже вышел — и релиз получился интересным. Представлен адаптер для Three.js 🎉 До 50% меньше кода для создания 3D-анимаций API для 3D-объектов в стиле CSS-трансформаций (rotate, skew и др.) Более простая анимация цветов материалов Удобная анимация инстансированных мешей (Instanced Mesh) Поддержка Stagger 3D И это далеко не всё. На видео показан пример анимации сцены Three.js через новый адаптер Anime.js. Благодаря ему можно анимировать объекты почти так же просто, как DOM-элементы в браузере, но уже в 3D-пространстве. демо: https://codepen.io/editor/juliangarnier/pen/019ef018-43bb-7333-a6aa-2360a6d0e59b доки: https://animejs.com/documentation/adapters/threejs-adapter/ чейнджлог: https://github.com/juliangarnier/anime/releases/tag/v4.5.0 @WebDev_Plus

Создал Telegram-бота и получил токен. Установил: laravel/ai nutgram/laravel Собрал SupportAgent с парой инструментов. И бац — пользователи уже получают реально полезную AI-поддержку прямо в Telegram. Ребята, как это вообще может быть настолько просто. Не игнорируйте laravel/ai @WebDev_Plus

Вот open-source веб-фреймворки в разных языках 😎👇

Для Chrome вышло расширение Caveman, которое помогает сокращать количество токенов при работе с ИИ-моделями. Расширение поддерживает ChatGPT, Claude, Gemini и другие сервисы. Оно автоматически переписывает промпты и ответы, убирая лишние слова без потери основного смысла. По словам первопроходцев, это позволяет сократить расход выходных токенов до 75%, а ответы сделать более краткими и содержательными. @WebDev_Plus

🔥 Laravel Tip В Laravel есть встроенный способ защититься от дублирующихся задач в очередях — интерфейс ShouldBeUnique. Достаточно реализовать метод uniqueId() и вернуть уникальный идентификатор задачи:

class SyncUser implements ShouldQueue, ShouldBeUnique
{
    public function uniqueId(): string
    {
        return $this->userId;
    }
}

Если задача с таким идентификатором уже находится в очереди, Laravel не поставит её повторно. Меньше ручных проверок, меньше блокировок и меньше гонок данных. Особенно полезно для синхронизации пользователей, обработки вебхуков и фоновых задач, которые могут запускаться несколько раз подряд. @WebDev_Plus

В PHP 8.4 появились две небольшие функции, которых разработчикам не хватало годами: array_any() и array_all(). Теперь вместо циклов вроде:

foreach ($items as $item) {
    if (...) {
        return true;
    }
}
return false;

можно написать:

return array_any($items, fn ($item) => ...);

А проверки "все элементы соответствуют условию" превращаются в:

return array_all($items, fn ($item) => ...);

Кода меньше, читается проще, намерение видно сразу. Редкий случай, когда небольшое дополнение к языку реально убирает тонны однотипного шаблонного кода. @WebDev_Plus

🔥VPS + ISPmanager со скидкой до 100% на Waicore Запускаете сайты на VPS? Сейчас самое время попробовать ISPmanager практически бесплатно. ➕ Наши акции: — 100% скидка на первый месяц лицензии ISPmanager при заказе VPS из категории «Веб-хостинг» — Скидка 60% на лицензии ISPmanager при отдельной покупке Также доступны: 🛡 SSL-сертификаты 🛡 BitNinja для защиты серверов от атак, спама и вредоносного ПО. Получаете готовый VPS с установленной панелью управления и можете сразу приступать к работе с сайтами, почтой, базами данных и другими сервисами. ⚡️Акция действует месяц. Подробнее на сайте WAICORE.

Блин... Этот open-source HTML Email Builder просто огонь Это SDK для визуальной сборки email-шаблонов через drag-and-drop. Пользователи могут создавать письма без необходимости писать HTML-код с нуля. → визуальный email-конструктор с drag-and-drop → готовые email-компоненты → настраиваемые макеты писем → экспорт в HTML, MJML или JSON Отлично подойдёт для SaaS-продуктов, e-commerce, CRM-систем, маркетинговых платформ и любых приложений, где нужно создавать email-шаблоны. Исходники : github.com/templatical/sdk @WebDev_Plus

Выводи типы из значений в TypeScript. То есть не дублируй руками union-типы вроде:

type Role = "system_admin" | "content_editor" | "guest_viewer";

Лучше задай объект один раз, а тип получи из него:

type ValueOf<T extends Record<PropertyKey, unknown>> = T[keyof T];

const USER_ROLE = {
  Admin: "system_admin",
  Editor: "content_editor",
  Viewer: "guest_viewer",
} as const satisfies Record<string, string>;

type Role = ValueOf<typeof USER_ROLE>;

Теперь Role автоматически равен:

"system_admin" | "content_editor" | "guest_viewer"

Если потом добавишь новую роль в USER_ROLE, тип обновится сам. @WebDev_Plus

Фиксация сессии в 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