WebDev+ | Веб-разработка
8.26K subscribers
549 photos
247 videos
10 files
718 links
Присоединяйтесь к нашему каналу и погрузитесь в мир веб-разработки

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

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

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
🆕 Представлен MDN MCP Server!

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

Полезная штука для тех, кто использует Claude Code, Codex, Cursor и другие MCP-совместимые инструменты при веб-разработке.

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
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
1
Кто сказал, что запуск больших моделей локально обязательно должен быть тяжёлым и раздутым?

Shimmy — это односоставный бинарник на Rust размером всего 5 МБ, который явно бросает вызов Ollama.

Что обещает проект:

→ один исполняемый файл размером 5 МБ
→ запуск примерно за 100 мс
→ потребление памяти около 50 МБ
→ 100% совместимость с OpenAI API

Если Ollama кажется слишком громоздким, а запускать локальные модели всё равно хочется — стоит присмотреться к Shimmy.

https://github.com/Michael-A-Kuykendall/shimmy

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

Исправляется одной строкой:

session_regenerate_id(true);


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

session_regenerate_id();


старый идентификатор останется валидным на диске. В таком случае заранее украденный или навязанный до авторизации cookie всё ещё может использоваться для доступа к старой сессии.

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

@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
This media is not supported in your browser
VIEW IN TELEGRAM
Блин... Этот 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
В 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
🔥 Laravel Tip

В Laravel есть встроенный способ защититься от дублирующихся задач в очередях — интерфейс ShouldBeUnique.
Достаточно реализовать метод uniqueId() и вернуть уникальный идентификатор задачи:
class SyncUser implements ShouldQueue, ShouldBeUnique
{
public function uniqueId(): string
{
return $this->userId;
}
}


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

@WebDev_Plus
This media is not supported in your browser
VIEW IN TELEGRAM
Для Chrome вышло расширение Caveman, которое помогает сокращать количество токенов при работе с ИИ-моделями.

Расширение поддерживает ChatGPT, Claude, Gemini и другие сервисы. Оно автоматически переписывает промпты и ответы, убирая лишние слова без потери основного смысла.

По словам первопроходцев, это позволяет сократить расход выходных токенов до 75%, а ответы сделать более краткими и содержательными.

@WebDev_Plus
1
Вот open-source веб-фреймворки в разных языках 😎👇
Создал Telegram-бота и получил токен.

Установил:
laravel/ai
nutgram/laravel

Собрал SupportAgent с парой инструментов.

И бац — пользователи уже получают реально полезную AI-поддержку прямо в Telegram.

Ребята, как это вообще может быть настолько просто.

Не игнорируйте laravel/ai

@WebDev_Plus
This media is not supported in your browser
VIEW IN TELEGRAM
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
1
CSS Tip: Автоматически помечайте внешние ссылки
Если ссылка открывается в новой вкладке через target="_blank", можно добавить к ней визуальный индикатор с помощью CSS.

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


Преимущества:
Пользователь сразу видит, что ссылка откроется в новой вкладке
Улучшается UX без изменения HTML-разметки
Работает автоматически для всех внешних ссылок с target="_blank"
Не нужно вручную добавлять иконки в каждую ссылку

Небольшая деталь, которая делает интерфейс более понятным.
#CSS #Frontend #WebDev #UIDesign

@WebDev_Plus
👍3
Мой племянник учится на втором курсе программной инженерии. Позвонил недавно, попросил помочь с поиском стажировки. И среди прочего спросил, где лучше разобраться с Git. Я удивился. На втором курсе студенты всё ещё обходят Git стороной. А потом это бьёт по ним на собеседованиях.

Я посоветовал ему отличный гайд от Beej.

Он перезвонил сегодня. Полный восторга. Делился впечатлениями. Так что вот, снова рекомендую. Для всех студентов и всех, кто только начинает знакомство с Git.

https://beej.us/guide/bggit/

@WebDev_Plus
👍21
Ты создаёшь отдельные роуты под вебхуки от каждого внешнего сервиса?

Сколько бы сервисов ни слали webhook-события, тебе нужен один роут, один контроллер и один менеджер вебхуков.

@WebDev_Plus
Astro — лучшее, что случалось с веб-разработкой за последнее время. И только вышла седьмая версия.

Из нового: Vite 8 с Rolldown, компилятор на Rust, сборка до 61% быстрее, улучшения для AI-агентов.

> pnpm create astro

@WebDev_Plus
1
20 законов разработки, которые должен знать каждый инженер

1. Закон Галла: Работающая сложная система вырастает из работающей простой.

2. KISS: Делай проще. Всё остальное — оверхеад.

3. Закон Конвея: Компании проектируют системы, которые повторяют структуру их коммуникаций.

4. Закон Хайрума: У достаточно большого API уже неважно, что ты обещал в контракте. Кто-нибудь уже зависит от каждого observable-поведения твоей системы.

5. CAP-теорема: Выбери два: консистентность, доступность, устойчивость к разделению.

6. Закон Завински: Любая программа разрастается до тех пор, пока не научится читать почту.

7. Закон Брукса: Добавление людей в опаздывающий проект делает его ещё более поздним.

8. Эффект Рингельмана: Производительность каждого участника группы падает с ростом группы.

9. Закон Прайса: Половину работы делают квадратный корень от всех людей.

10. Эффект Даннинга — Крюгера: Новички переоценивают свои способности, эксперты — недооценивают.

11. Закон Хофштадтера: Всё занимает больше времени, чем ты планируешь, даже с учётом этого закона.

12. Закон Паркинсона: Работа расширяется, чтобы заполнить всё отведённое на неё время.

13. Закон Гудхарта: Когда метрика становится целью, она перестаёт быть хорошей метрикой.

14. Закон Гилба: Измерять неточно лучше, чем не измерять вообще.

15. Принцип Кнута: Забудь о микрооптимизациях в 97% случаев. Преждевременная оптимизация — корень всех зол.

16. Закон Амдала: Ускорение одной части системы ограничено долей времени, которое эта часть реально используется.

17. Закон Мёрфи: Если что-то может пойти не так, оно пойдёт не так.

18. Закон Постела: Будь консервативен в том, что отправляешь, и либерален в том, что принимаешь.

19. Закон Стерджена: 90% всего на свете — фигня.

20. Закон Каннингема: Лучший способ получить правильный ответ в интернете — не задать вопрос, а написать неправильный ответ.

@WebDev_Plus
PHP не перекомпилирует твой regex при каждом вызове preg_match.

Внутри ext/pcre живёт LRU-кэш на 4096 паттернов. Первый раз: pcre2_compile + pcre2_jit_compile. Все следующие — прямой указатель.

Поэтому один и тот же regex в цикле работает со скоростью нативного кода. JIT-паттерн уже в кэше.

Не генерируй паттерны динамически на лету, если можно этого избежать. Иначе кэш слетает.

@WebDev_Plus