Практическое руководство по элементу <img>: от основ до LCP

Смещение контента при загрузке страницы, избыточный трафик на мобильных устройствах, потерянные баллы Core Web Vitals — всё это часто следствие недооценки возможностей элемента <img>.

В новом руководстве рассматриваются ключевые аспекты работы с изображениями в HTML:

✅ указание width и height для предотвращения смещения макета (CLS);
✅ адаптивность через srcset и sizes — как браузер выбирает нужный размер;
✅ поддержка современных форматов (AVIF, WebP) с помощью <picture>;
✅ управление приоритетами загрузки: loading, decoding, fetchpriority;
✅ стратегия для LCP с предварительной загрузкой адаптивных изображений.

В финале — сравнение ручного подхода и использования Image CDN с акцентом на практическую целесообразность.


🖥 Читать статью

📱 @dev_notes_ru

#HTML #LCP #CoreWebVitals

Taskfile: Когда пора отказаться от Makefile (а когда — нет)

Makefile — инструмент с почти полувековой историей, который продолжает оставаться стандартом во многих проектах. Однако его синтаксис, ориентированный на shell-сценарии, не всегда удобен при решении современных задач: кросс-платформенная работа, интерактивные запросы, модульная организация кода.

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

В статье рассматриваются ключевые различия между двумя подходами:

✅ документация и навигация по задачам;
✅ работа на разных операционных системах;
✅ инкрементальные сборки и контроль изменений;
✅ интерактивные сценарии и валидация;
✅ модульность и переиспользование конфигураций.

Также приводится три стратегии внедрения Taskfile в существующие проекты — от нового проекта до постепенного рефакторинга проблемных мест.

🖥 Читать статью

📱 @dev_notes_ru

#Taskfile #Makefile #DevOps #автоматизация #инструменты

Проксирование fetch() в серверном JavaScript

Стандарт Fetch не специфицирует проксирование HTTP-запросов, поэтому каждый серверный JavaScript-рантайм реализует эту возможность по-своему. В результате разработчики сталкиваются с несовместимостью решений при смене среды исполнения.

В статье рассматриваются следующие подходы:

✅ Bun и Deno — встроенная поддержка прокси через опции fetch()
✅ Node.js — два пути: глобальные переменные окружения или пакет undici для per-request настройки
⚠️ Cloudflare Workers — отсутствие нативной поддержки и три архитектурных альтернативы (Docker-контейнер, TCP-сокеты, вынос логики в отдельный микросервис)

Также приведён чек-лист для проверки, действительно ли трафик идёт через прокси, и разбор типовых ошибок.

🖥 Читать статью

📱 @dev_notes_ru

#JavaScript #Nodejs

JSON в браузере: import или fetch — руководство по выбору

Спойлер: import из JSON — это не замена fetch()

Кажется, что новый синтаксис import data from './file.json' with { type: 'json' } проще и современнее. Но у него есть три жёстких ограничения:

🔹 Пожизненное кеширование — данные останутся в памяти на всю сессию
🔹 Нет отмены запроса — AbortController не подключается
🔹 Минимум информации об ошибках — не поймёшь, 404 это или CORS

В статье сравнили оба подхода по безопасности, кешу, стримингу и контролю. В конце — готовый чек-лист: когда брать import, а когда только fetch с проверкой Content-Type.

🖥 Читать статью

📱 @dev_notes_ru

#JavaScript #JSON #import #fetch

Валидация массивов в Laravel без N+1: Form Request как построитель контекста

Применение правила exists к массивам в Form Request порождает проблему N+1 запросов: каждый идентификатор проверяется отдельным SQL-запросом. При росте количества элементов это создает неоправданную нагрузку на базу данных и увеличивает время ответа.

В статье рассматривается метод решения этой проблемы с помощью prepareForValidation(). Подход позволяет заменить серию отдельных запросов одним whereIn, сохранив при этом возможность точного указания ошибочного поля в ответе валидатора.

Основные темы:
— Анализ затрат стандартного правила exists для массивов.
— Ограничения метода after() в контексте сохранения структуры ошибок.
— Реализация предзагрузки допустимых значений и легитимность расширения ответственности Form Request.

🖥 Читать статью

📱 @dev_notes_ru

#Laravel #PHP #Backend #ВалидацияДанных

Статические переменные в PHP: использование static внутри функций

По данным исследования Exakat, конструкция static $var в теле функции встречается в каждой третьей PHP-кодовой базе. Несмотря на удобство реализации ленивой инициализации и мемоизации, этот подход сопряжён с рядом архитектурных ограничений.

В статье рассмотрены:

✅ Критерии допустимости использования в CLI-скриптах и средах с постоянными воркерами.
✅ Изменение поведения статических переменных при наследовании методов в PHP 8.1.
✅ Возможность динамической инициализации выражениями в PHP 8.3.

Практическое применение метода и альтернативы.

🖥 Читать статью

📱 @dev_notes_ru

#php #php8

Уникальный индекс при мягком удалении: решаем проблему дубликатов

При использовании мягкого удаления стандартный уникальный индекс перестаёт выполнять свою функцию: запись помечена как удалённая, но её данные по-прежнему участвуют в проверке уникальности. Результат — пользователь не может восстановить аккаунт на прежний e-mail.

В новом материале рассмотрены два способа решения этой архитектурной задачи:

✅ Частичные индексы в PostgreSQL — условие WHERE deleted_at IS NULL прямо в определении индекса.
✅ Генерируемые столбцы в MySQL — использование семантики NULL в составном уникальном ключе.

Оба метода разобраны с готовыми миграциями для Laravel и интеграционными тестами. Также затронуты вопросы производительности, восстановления записей и соответствия GDPR.

🖥 Читать статью

📱 @dev_notes_ru

#SoftDelete #Laravel #Eloquent #PostrgeSQL #MySQL