Статьи
Практическое руководство по элементу img
Элемент<img> кажется простым, но его неправильное использование — одна из частых причин проблем с производительностью: смещение макета, загрузка тяжёлых изображений на мобильные устройства, медленный LCP. Руководство объясняет, как и почему браузер работает с изображениями: от указания размеров и адаптивности через srcset с sizes до современных форматов в <picture>, управления приоритетами загрузки и стратегий для LCP с предварительной загрузкой.
Приёмы работы с PostgreSQL, меняющие архитектуру решений
PostgreSQL часто воспринимают как пассивное хранилище, хотя его возможности позволяют пересмотреть архитектуру приложения. Ограничения схемы (EXCLUDE, GENERATED) берут на себя проверки целостности. Выразительные средства языка (DISTINCT ON, FILTER, рекурсивные CTE) делают запросы компактнее. А выбор между JSONB и композитными типами открывает разные пути моделирования данных — от полной гибкости до строгой схемы.
Как сделать Laravel-контроллер тестируемым
Если вы пишете тесты в Laravel, но чувствуете, что они какие-то формальные — проверяют статусы, но не логику — этот текст для вас. Разбираем один приём, после которого ваши тесты начнут находить проблемы, а не просто проходить.Мягкое удаление (Soft Delete) в Laravel: Полное руководство
Представьте, что пользователь случайно удалил важную запись в блоге. Или администратор очистил таблицу с данными, которые нужны для квартального отчёта. В обычной ситуации эти данные исчезли бы навсегда.Понижаем приоритет группы CSS-правил с помощью @layer
Вы, вероятно, уже знаете, что можно использовать:where() для снижения специфичности одного селектора, но знали ли вы, что можно добиться аналогичного эффекта сразу для нескольких правил?
Атрибут alt и figcaption: в чём разница и что использовать
Чем отличается описательный текст атрибутаalt изображения от подписи figcaption, которая размещается в элементе <figure>?
Атрибуты и свойства HTML: в чём разница
Атрибуты и свойства HTML-элементов часто путают, но их различие напрямую влияет на работу с формами и динамическим контентом. Разбираемся, почемуinput.value и getAttribute('value') возвращают разные значения и как писать надёжный код.
URL Pattern API: Маршрутизация в JavaScript
URL Pattern API — это как регулярные выражения для адресной строки, только проще. Разбираем синтаксис, три главных метода и сценарии использования: от умного кэширования в Service Worker до роутинга на сервере.Настройка доверенной публикации в npm: пошаговая инструкция
В связи с участившимися атаками на цепочки поставок и последовавшим отзывом долгоживущих npm-токенов, разработчикам необходимо перейти на механизм доверенной публикации (trusted publishing). Официальная документация npm описывает общие принципы работы, на практике процесс настройки содержит ряд неочевидных требований. В статье рассмотрены шаги для настройки доверенной публикации через GitHub Actions, включая конфигурацию пакета, права доступа и корректные параметры публикации, а также разобраны типичные ошибки и способы их устранения.Чистое API для чтения PHP-атрибутов
Большинство разработчиков даже не подозревают, сколько строк кода они пишут каждый раз, когда читают атрибуты. Reflection API заставляет повторять одни и те же конструкции в каждом проекте. Но есть способ сократить этот код на 80% без потери гибкости.Руководство по стилю объектного проектирования для PHP 8.5
Хватит писать тонны геттеров и сеттеров! Это руководство по стилю объектного проектирования покажет, как принципы Маттиаса Нобака реализуются в PHP 8.5. Readonly-классы, property hooks, clone with, pipe-оператор и другие возможности для чистого кода без бойлерплейта. Примеры и полный гайд.JavaScript: передаём параметры в addEventListener правильно
Слушатели событий необходимы для интерактивности в JavaScript, но они могут незаметно вызывать утечки памяти, если их не удалить надлежащим образом. А что, если слушателю событий нужны параметры? Вот тут-то и начинается самое интересное. Рассмотрим, какие функции JavaScript делают обработку параметров с помощью обработчиков событий возможной и хорошо поддерживаемой.Итераторы в JavaScript: подробное руководство
Чем отличается итерируемый объект от итератора? Как работаютSymbol.iterator, next(), for...of? Создание своих итераторов и ленивые вычисления. С примерами кода и ссылками на смежные статьи.
Fluid-типографика: создание адаптивных и доступных текстов
Адаптивная типографика — это не просто "сделать текст плавным". Это умение балансировать между красивой адаптивностью и уважением к пользователю. В этом руководстве мы разберём, как создать систему, которая подстраивается под любой экран, учитывает личные настройки и проходит проверку на доступность (WCAG). Никакой воды — только код, объяснения и готовые шаблоны.JSDoc на практике: настройка проверки типов в JavaScript
Переходим от теории к практике. Разберём реальный кейс: как разработчик Крис Фердинанди добавил проверку типов в свой UI-кит Kelp, используя JSDoc и TypeScript Compiler, но без единого.ts файла. Рассмотрим пошаговую настройку окружения, основные приёмы типизации переменных, функций и DOM-элементов, создание собственных типов с @typedef, а также следующие шаги — от автоматической проверки в CI до генерации .d.ts файлов. Все примеры адаптированы для самостоятельного повторения.
Как писать CSS с @scope
В декабре 2025 года в CSS произошло событие, которое сложно переоценить: последний из основных браузеров — Firefox 146 — добавил поддержку правила@scope. Это означает, что технология получила статус Baseline Newly Available и готова к промышленному использованию во всех современных браузерах без исключений.
Модальное окно или диалог: как выбрать и не сломать доступность
Путаница в терминах и непонимание разницы между модальным и обычным диалогом — частая причина плохого UX и проблем с доступностью. Разбираемся в типах компонентов, даём готовые критерии выбора и чек-лист для внедрения.Интеграция каскадных слоёв в существующий проект
Каскадные слои CSS (@layer) предоставляют эффективный механизм управления специфичностью и порядком применения стилей. Однако существующие материалы обычно демонстрируют их использование на новых проектах, тогда как большинство разработчиков работает с унаследованной кодовой базой. В статье на примере реального сайта рассматривается пошаговая стратегия внедрения Cascade Layers в существующий проект: от подготовительного рефакторинга до построения финальной архитектуры слоёв и решения сложных вопросов, возникающих в процессе миграции.
CSS `@scope`: Как изолировать стили без BEM и Tailwind
Вы всё ещё пишетеblock__element--modifier? Или смирились с тысячами утилит в HTML? @scope позволяет оставить и классы, и утилиты, но забыть о войнах специфичности. Вот 3 сценария, где @scope меняет правила игры, и точный план внедрения в ваш проект.