📰 Ежемесячный дайджест Baseline: январь 2026
Привет! Встречайте первый в этом году выпуск Baseline Digest. Мы собрали для вас все важные новинки веб-платформы, которые в январе достигли новых этапов в проекте Baseline. Поехали!🚀
✅ Новое в категории Newly Available
Эти функции теперь стабильно работают во всех основных браузерах.
1. Псевдокласс
Позволяет стилизовать корневой элемент документа во время перехода между состояниями страницы (View Transition). Это дает тонкий контроль над анимацией смены контента.
2. JavaScript-модули в Service Workers
Теперь и в Service Worker можно использовать стандартные
3. Navigation API
Современная замена устаревшему History API, созданная специально для Single Page Applications (SPA). Дает единый способ управления навигацией, включая кнопки «назад/вперед», с меньшим количеством шаблонного кода.
4. Новые CSS-единицы (относительно root):
🌐 Новое в категории (Widely Available
Эти функции уже давно с нами, а теперь окончательно подтвердили свою стабильность и готовы к использованию в любых проектах.
1. Двухзначное свойство
Вместо
2. Свойство
Определяет, как накладываются друг на друга несколько анимаций, влияющих на одно и то же свойство. Доступны режимы:
3. Иммутабельные методы массивов
toReversed(), toSorted() и
🖥 January 2026 Baseline monthly digest
📱 @dev_notes_ru
#Baseline #Frontend
Привет! Встречайте первый в этом году выпуск Baseline Digest. Мы собрали для вас все важные новинки веб-платформы, которые в январе достигли новых этапов в проекте Baseline. Поехали!
✅ Новое в категории Newly Available
Эти функции теперь стабильно работают во всех основных браузерах.
1. Псевдокласс
:active-view-transitionПозволяет стилизовать корневой элемент документа во время перехода между состояниями страницы (View Transition). Это дает тонкий контроль над анимацией смены контента.
2. JavaScript-модули в Service Workers
Теперь и в Service Worker можно использовать стандартные
import/export! Просто добавьте { type: 'module' } при регистрации. Это упрощает организацию кода и управление зависимостями.3. Navigation API
Современная замена устаревшему History API, созданная специально для Single Page Applications (SPA). Дает единый способ управления навигацией, включая кнопки «назад/вперед», с меньшим количеством шаблонного кода.
4. Новые CSS-единицы (относительно root):
rcap: Высота заглавных букв корневого элемента. Идеально для точной типографики.rch: Ширина символа 0 в шрифте корневого элемента.rex: Высота строчных букв (ex) корневого элемента. Полезно для вертикального выравнивания.ric: Ширина/высота иероглифа (CJK) корневого элемента. Незаменимо для многоязычных интерфейсов.🌐 Новое в категории (Widely Available
Эти функции уже давно с нами, а теперь окончательно подтвердили свою стабильность и готовы к использованию в любых проектах.
1. Двухзначное свойство
displayВместо
inline-flex можно писать display: inline flex. Это разделяет «внешний» (как элемент взаимодействует с потоком) и «внутренний» (как ведут себя дочерние элементы) типы отображения. Более логично и гибко.2. Свойство
animation-compositionОпределяет, как накладываются друг на друга несколько анимаций, влияющих на одно и то же свойство. Доступны режимы:
replace (заменить), add (добавить) и accumulate (накопить).3. Иммутабельные методы массивов
toReversed(), toSorted() и
toSpliced() — новые методы, которые возвращают новый массив с изменениями, не трогая исходный. Это шаг к более чистому и предсказуемому функциональному программированию на JavaScript.#Baseline #Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Soft Delete в Laravel: Как настроить, использовать и восстанавливать данные
Soft delete часто воспринимается как простая тема, однако на практике возникает множество вопросов: как правильно тестировать эту функциональность, учитывать требования GDPR, настраивать привязку к маршрутам и автоматически очищать устаревшие записи.
В статье последовательно разобраны следующие темы:
✅ Настройка
✅ Работа с методами
✅ Применение
✅ Тестирование soft delete с использованием встроенных assertion-методов
Материал будет полезен как для внедрения мягкого удаления в новых проектах, так и для рефакторинга существующего кода.
🖥 Читать статью
📱 @dev_notes_ru
#Laravel #Eloquent #PHP #SoftDelete
Soft delete часто воспринимается как простая тема, однако на практике возникает множество вопросов: как правильно тестировать эту функциональность, учитывать требования GDPR, настраивать привязку к маршрутам и автоматически очищать устаревшие записи.
В статье последовательно разобраны следующие темы:
SoftDeletes и создание миграцииwithTrashed(), onlyTrashed() и restore()Prunable для автоматической очистки базы данныхМатериал будет полезен как для внедрения мягкого удаления в новых проектах, так и для рефакторинга существующего кода.
#Laravel #Eloquent #PHP #SoftDelete
Please open Telegram to view this post
VIEW IN TELEGRAM
Как сделать Laravel-контроллер тестируемым и перестать бояться рефакторинга
Вы уверены, что ваши тесты действительно что-то тестируют? 🤔
Представьте: вы случайно (ну, бывает) закомментировали ключевой вызов сервиса в контроллере подписки. Прогоняете тесты — все зеленое! Отличная работа, можно деплоить. А подписчики в это время не подписываются. Знакомое чувство ложной безопасности?
Статья как раз об этой проблеме: когда тесты проверяют ответ, но игнорируют поведение. Разобрал на живом примере, как один
Что внутри:
🔹 Почему создание сервисов через
🔹 Как внедрение зависимости (
🔹 Прием с
🔹 Сравнение
Если хотите писать тесты, которые находят проблемы, а не просто «проходят», — заглядывайте.
🖥 Читать статью
📱 @dev_notes_ru
#Laravel #TDD #PHP
Вы уверены, что ваши тесты действительно что-то тестируют? 🤔
Представьте: вы случайно (ну, бывает) закомментировали ключевой вызов сервиса в контроллере подписки. Прогоняете тесты — все зеленое! Отличная работа, можно деплоить. А подписчики в это время не подписываются. Знакомое чувство ложной безопасности?
Статья как раз об этой проблеме: когда тесты проверяют ответ, но игнорируют поведение. Разобрал на живом примере, как один
new в контроллере делает ваш код непроверяемым.Что внутри:
🔹 Почему создание сервисов через
new — путь к хрупким тестам.🔹 Как внедрение зависимости (
Dependency Injection) спасает ситуацию.🔹 Прием с
resolve() для "легаси-кода", когда менять сигнатуру метода нельзя.🔹 Сравнение
$this->mock() и чистого Mockery — чувствуем разницу.Если хотите писать тесты, которые находят проблемы, а не просто «проходят», — заглядывайте.
#Laravel #TDD #PHP
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3🔥2
Приёмы работы с PostgreSQL, меняющие архитектуру решений
Когда речь заходит о проверке целостности данных, например, запрете пересекающихся интервалов бронирования, возникает вопрос: где разместить эту логику? В коде приложения или на стороне базы данных? PostgreSQL предоставляет инструменты, которые позволяют делегировать такие проверки уровню СУБД, снижая нагрузку на прикладной код и минимизируя риски состояний гонки.
В статье рассматриваются:
✅ Ограничение
✅ Генерируемые колонки (
✅ Рекурсивные CTE — обход иерархий и графов в несколько строк вместо императивных конструкций.
✅
Материал будет полезен разработчикам, которые стремятся писать более лаконичный и надёжный код, опираясь на возможности реляционной модели.
🖥 Читать статью
📱 @dev_notes_ru
#PostgreSQL #SQL #Database
Когда речь заходит о проверке целостности данных, например, запрете пересекающихся интервалов бронирования, возникает вопрос: где разместить эту логику? В коде приложения или на стороне базы данных? PostgreSQL предоставляет инструменты, которые позволяют делегировать такие проверки уровню СУБД, снижая нагрузку на прикладной код и минимизируя риски состояний гонки.
В статье рассматриваются:
EXCLUDE — декларативный способ запретить пересечение интервалов без дополнительных проверок в коде.GENERATED) — вычисление производных значений непосредственно в базе.JSONB и композитные типы — сравнение подходов к моделированию гибких структур данных.Материал будет полезен разработчикам, которые стремятся писать более лаконичный и надёжный код, опираясь на возможности реляционной модели.
#PostgreSQL #SQL #Database
Please open Telegram to view this post
VIEW IN TELEGRAM
Быстрый совет: не используйте
Элемент
Проблема в том, что
Далее, скринридеры. Большинство скринридеров не озвучивают атрибут
Гораздо лучше вернуться к старому газетному стилю: в первый раз напишите полную фразу, а затем в скобках — аббревиатуру. После этого можете использовать только сокращение.
#a11y #HTML
<abbr>Элемент
<abbr> предназначен для обозначения аббревиатуры. Идея в том, что вы вставляете сокращение, а затем с помощью атрибута title показываете его полную расшифровку.<p>Без <abbr title="Cascading Style Sheets">CSS</abbr> любая HTML-страница будет выглядеть как простой текстовый документ из 90-х.</p>
Проблема в том, что
<abbr> — не интерактивный элемент. На него нельзя переключиться по табуляции. Он будет прочитан точно так же, как любое другое слово в предложении. Если навести мышь на элемент, вы увидите подсказку title. Но если вы используете клавиатуру — нет никакого способа её отобразить.Далее, скринридеры. Большинство скринридеров не озвучивают атрибут
title.Гораздо лучше вернуться к старому газетному стилю: в первый раз напишите полную фразу, а затем в скобках — аббревиатуру. После этого можете использовать только сокращение.
#a11y #HTML
👌4
Практическое руководство по элементу
Смещение контента при загрузке страницы, избыточный трафик на мобильных устройствах, потерянные баллы Core Web Vitals — всё это часто следствие недооценки возможностей элемента
В новом руководстве рассматриваются ключевые аспекты работы с изображениями в HTML:
✅ указание
✅ адаптивность через
✅ поддержка современных форматов (AVIF, WebP) с помощью
✅ управление приоритетами загрузки:
✅ стратегия для LCP с предварительной загрузкой адаптивных изображений.
В финале — сравнение ручного подхода и использования Image CDN с акцентом на практическую целесообразность.
🖥 Читать статью
📱 @dev_notes_ru
#HTML #LCP #CoreWebVitals
<img>: от основ до LCPСмещение контента при загрузке страницы, избыточный трафик на мобильных устройствах, потерянные баллы Core Web Vitals — всё это часто следствие недооценки возможностей элемента
<img>.В новом руководстве рассматриваются ключевые аспекты работы с изображениями в HTML:
width и height для предотвращения смещения макета (CLS);srcset и sizes — как браузер выбирает нужный размер;<picture>;loading, decoding, fetchpriority;В финале — сравнение ручного подхода и использования Image CDN с акцентом на практическую целесообразность.
#HTML #LCP #CoreWebVitals
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
Taskfile: Когда пора отказаться от Makefile (а когда — нет)
Makefile — инструмент с почти полувековой историей, который продолжает оставаться стандартом во многих проектах. Однако его синтаксис, ориентированный на shell-сценарии, не всегда удобен при решении современных задач: кросс-платформенная работа, интерактивные запросы, модульная организация кода.
Taskfile предлагает альтернативную модель: конфигурация на YAML, где многие сложные сценарии реализованы как встроенные механизмы, а не требуют самодельных конструкций.
В статье рассматриваются ключевые различия между двумя подходами:
✅ документация и навигация по задачам;
✅ работа на разных операционных системах;
✅ инкрементальные сборки и контроль изменений;
✅ интерактивные сценарии и валидация;
✅ модульность и переиспользование конфигураций.
Также приводится три стратегии внедрения Taskfile в существующие проекты — от нового проекта до постепенного рефакторинга проблемных мест.
🖥 Читать статью
📱 @dev_notes_ru
#Taskfile #Makefile #DevOps #автоматизация #инструменты
Makefile — инструмент с почти полувековой историей, который продолжает оставаться стандартом во многих проектах. Однако его синтаксис, ориентированный на shell-сценарии, не всегда удобен при решении современных задач: кросс-платформенная работа, интерактивные запросы, модульная организация кода.
Taskfile предлагает альтернативную модель: конфигурация на YAML, где многие сложные сценарии реализованы как встроенные механизмы, а не требуют самодельных конструкций.
В статье рассматриваются ключевые различия между двумя подходами:
Также приводится три стратегии внедрения Taskfile в существующие проекты — от нового проекта до постепенного рефакторинга проблемных мест.
#Taskfile #Makefile #DevOps #автоматизация #инструменты
Please open Telegram to view this post
VIEW IN TELEGRAM
Проксирование
Стандарт Fetch не специфицирует проксирование HTTP-запросов, поэтому каждый серверный JavaScript-рантайм реализует эту возможность по-своему. В результате разработчики сталкиваются с несовместимостью решений при смене среды исполнения.
В статье рассматриваются следующие подходы:
✅ Bun и Deno — встроенная поддержка прокси через опции
✅ Node.js — два пути: глобальные переменные окружения или пакет
⚠️ Cloudflare Workers — отсутствие нативной поддержки и три архитектурных альтернативы (Docker-контейнер, TCP-сокеты, вынос логики в отдельный микросервис)
Также приведён чек-лист для проверки, действительно ли трафик идёт через прокси, и разбор типовых ошибок.
🖥 Читать статью
📱 @dev_notes_ru
#JavaScript #Nodejs
fetch() в серверном JavaScriptСтандарт Fetch не специфицирует проксирование HTTP-запросов, поэтому каждый серверный JavaScript-рантайм реализует эту возможность по-своему. В результате разработчики сталкиваются с несовместимостью решений при смене среды исполнения.
В статье рассматриваются следующие подходы:
fetch()undici для per-request настройки⚠️ Cloudflare Workers — отсутствие нативной поддержки и три архитектурных альтернативы (Docker-контейнер, TCP-сокеты, вынос логики в отдельный микросервис)
Также приведён чек-лист для проверки, действительно ли трафик идёт через прокси, и разбор типовых ошибок.
#JavaScript #Nodejs
Please open Telegram to view this post
VIEW IN TELEGRAM