Firefox 148: обновления для разработчиков и улучшения безопасности

24 февраля 2026 года состоялся релиз стабильной версии Firefox 148. В этом выпуске представлен ряд изменений, направленных на повышение производительности, расширение поддержки веб-стандартов и усиление безопасности. Ниже приведён обзор ключевых нововведений.

🚀 Улучшения для веб-разработчиков

HTML

Синхронная загрузка about:blank. Изменён механизм загрузки первоначального пустого документа. Теперь при навигации на about:blank документ загружается синхронно, что устраняет избыточную асинхронную замену и оптимизирует событие load. Изменение направлено на ускорение начальной отрисовки страниц.

CSS

Якорное позиционирование. Реализована поддержка свойства position-try-order, позволяющего задавать порядок перебора запасных позиций для элементов с якорным позиционированием. Свойство position-area теперь гарантирует корректное удержание привязанного элемента в пределах видимой области.

Обработка переполнения. Свойства overflow, overflow-x и overflow-y стали применимы к заменяемым элементам (например, изображениям) аналогично другим элементам, обеспечивая предсказуемое поведение при переполнении контейнера.

Функция shape(). Стандартизирована и включена по умолчанию поддержка функции shape() для создания сложных фигур в свойствах clip-path и offset-path. В отличие от path(), функция использует синтаксис CSS, что позволяет применять единицы измерения и математические функции для большей гибкости.

JavaScript

Комбинирование итераторов. Добавлены статические методы Iterator.zip() и Iterator.zipKeyed(), предназначенные для объединения данных из нескольких итераторов в позиционно согласованные группы.

Модернизация устаревших возможностей RegExp. В рамках реализации предложения TC39 Legacy RegExp Features проведена нормализация статических свойств RegExp ($1-$9, input и др.). Теперь они являются настраиваемыми и неперечисляемыми, что позволяет, например, удалять их с объекта RegExp.

API

Защита от XSS-атак. Внедрена поддержка Sanitizer API для безопасной очистки HTML перед вставкой в DOM, а также Trusted Types API, обеспечивающего проверку данных, передаваемых в потенциально опасные функции и свойства.

Навигация и события. Реализовано свойство Location.ancestorOrigins для определения происхождения родительских документов при встраивании через <iframe>. Для события pointerrawupdate добавлена корректная передача значений movementX и movementY.

Работа с буфером обмена. Команда "paste" для Document.execCommand() теперь доступна в веб-контенте и реализована через Clipboard API с соблюдением всех требований безопасности.

🛠 WebDriver (WebDriver BiDi, Marionette)

Взаимодействие с chrome браузера. В WebDriver BiDi добавлена начальная поддержка chrome-контекстов. Команда browsingContext.getTree с новым параметром moz:scope: chrome позволяет получать доступ к элементам интерфейса Firefox при запуске с флагом --remote-allow-system-access.

Исправления и оптимизация. Устранены состояния гонки при создании новых окон и навигации, а также ошибки, связанные с перенаправлением на страницы с ошибками и декодированием фрагментированных тел ответов. Производительность выполнения команд WebDriver BiDi улучшена при работе с недоступными контекстами.

Новые возможности Marionette. Добавлена команда Reporting:GenerateTestReport для генерации тестовых отчетов через Reporting API.

🧪 Экспериментальные функции

В версии 148 на стадии эксперимента (доступны в ночных сборках при включении соответствующей настройки) находится Document Picture-in-Picture API. API позволяет создавать окно поверх всех окон с произвольным HTML-содержимым, например, для отображения кастомных элементов управления видео или участников видеоконференции.

Полный список изменений доступен в официальной документации: Firefox 148 release notes.

📱 @dev_notes_ru

#Firefox

Чистое API для чтения PHP-атрибутов

Сколько строк кода вы пишете, чтобы просто прочитать один атрибут у класса? Обычно это 3-5 строк с ReflectionClass, проверкой count($attributes) > 0 и вызовом newInstance(). А если нужно найти все атрибуты Validate в свойствах, методах и параметрах — код разрастается до неприличных размеров.

Spatie выпустили элегантное решение spatie/php-attribute-reader, которое превращает это безобразие в одну строку. Зацените:

$route = Attributes::get(MyController::class, Route::class);

Что ещё умеет пакет:

🔹Искать атрибуты по всей иерархии классов (с поддержкой IS_INSTANCEOF).
🔹Работать с повторяющимися атрибутами (например, #[Middleware]).
🔹Возвращать удобный объект с контекстом: к какому свойству или методу привязан атрибут.

В статье рассматриваем, как искать атрибуты по всему классу разом и работать с иерархиями.

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

📱 @dev_notes_ru

#PHP8 #PHP

Экосистема JavaScript

📱 @dev_notes_ru

#Joke

Вайб-кодинг vs Вайб-дебагинг

📱 @dev_notes_ru

#Joke

Trusted Publishing в npm: пошаговое руководство по настройке

В связи с участившимися атаками на цепочки поставок и отзывом долгоживущих npm-токенов, разработчикам необходимо перейти на механизм доверенной публикации (trusted publishing). При обновлении рабочего процесса выяснилось, что ряд важных деталей в официальной документации npm либо опущены, либо изложены недостаточно явно.

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

✅ Регистрация доверенного издателя через интерфейс npm (и где его искать).
✅ Корректная конфигурация package.json и прав доступа в GitHub Actions.
✅ Типичные ошибки при публикации и способы их устранения (включая ошибку 403).

Материал будет полезен всем, кто поддерживает публичные npm-пакеты и использует автоматическую публикацию через GitHub Actions.

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

📱 @dev_notes_ru

#NodeJS #NPM

URL Pattern API: Руководство по нативной маршрутизации в JavaScript

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

С сентября 2025 года у JavaScript-разработчиков появился встроенный инструмент для этой задачи — URL Pattern API. Он предоставляет единый синтаксис для валидации URL и извлечения параметров, который работает во всех современных браузерах и в Node.js/Deno/Bun.

В статье подробно разбираются:

✅ Синтаксис шаблонов: именованные группы, модификаторы, регулярные выражения.
✅ API: методы test() для проверки соответствия и exec() для извлечения данных.
✅ Практика: примеры использования в Service Worker, SPA и серверном приложении.

Также в материале затронуты вопросы производительности и ограничения использования API для высоконагруженных серверных проектов.

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

📱 @dev_notes_ru

#JavaScript #WebAPI

Атрибуты и свойства HTML: в чём разница

Распространённая ситуация: разработчик пытается прочитать значение поля ввода через getAttribute('value'), но получает не актуальные данные, введённые пользователем, а первоначальное значение из HTML-разметки.

Это не ошибка JavaScript, а следствие фундаментального различия между атрибутами и свойствами DOM. Атрибуты — это исходные параметры, заданные в HTML (чертёж элемента). Свойства — это текущее состояние DOM-объекта в памяти браузера (реальность). И они могут расходиться.

В новой статье детально разбирается:

✅ Почему input.value и getAttribute('value') ведут себя по-разному.
✅ Как работает defaultValue и для чего он нужен.
✅ Особенности логических атрибутов (checked, disabled).
✅ Что важно знать о свойствах и атрибутах разработчикам на React.

Материал будет полезен как начинающим, так и опытным разработчикам, желающим систематизировать знания о DOM.

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

📱 @dev_notes_ru

#HTML #JavaScript #DOM #Frontend

Зачем нужен figcaption, если есть alt

При верстке изображений у разработчиков часто возникает вопрос: чем отличается атрибут alt от элемента <figcaption> и можно ли их использовать взаимозаменяемо? На первый взгляд оба элемента отвечают за описание, но их функции принципиально различаются.

О чем статья:

✅ alt — это замена изображения для тех, кто не может его увидеть (пользователи скринридеров, отключенные изображения).
✅ <figcaption> — это видимая подпись, поясняющая роль изображения в тексте для всех читателей.
✅ Простой тест, который поможет определить, нужна ли изображению подпись или достаточно грамотно заполненного alt.

Материал будет полезен всем, кто работает с контентом и стремится сделать верстку семантически правильной и доступной.

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

📱 @dev_notes_ru

#A11y #HTML #Frontend

Понижаем приоритет группы CSS-правил с помощью @layer

Управление приоритетами CSS-правил — одна из ключевых задач при поддержке проекта любого масштаба. Традиционные методы (контроль порядка подключения, повышение специфичности) не всегда эффективны, особенно при работе со сторонними библиотеками или унаследованным кодом.

Альтернативный подход — использование каскадных слоёв (@layer). Помещение "базовых" стилей (например, reset.css) в отдельный слой гарантирует, что они будут уступать основным правилам проекта, написанным вне слоя.

В статье рассматриваются:

✅ Три типовых сценария для применения этой техники.
✅ Особенности интеграции слоёв в существующую архитектуру.
✅ Специфика работы !important внутри каскадного слоя.

Будет полезно всем, кто стремится выстроить чистую и предсказуемую CSS-архитектуру.

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

📱 @dev_notes_ru

#CSS #Frontend

📰 Ежемесячный дайджест Baseline: январь 2026

Привет! Встречайте первый в этом году выпуск 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.

🖥 January 2026 Baseline monthly digest

📱 @dev_notes_ru

#Baseline #Frontend

git push —force

📱 @dev_notes_ru

#Joke

Вайб-кодер пытается объяснить функциональность и архитектуру своего приложения

📱 @dev_notes_ru

#Joke

Soft Delete в Laravel: Как настроить, использовать и восстанавливать данные

Soft delete часто воспринимается как простая тема, однако на практике возникает множество вопросов: как правильно тестировать эту функциональность, учитывать требования GDPR, настраивать привязку к маршрутам и автоматически очищать устаревшие записи.

В статье последовательно разобраны следующие темы:

✅ Настройка SoftDeletes и создание миграции
✅ Работа с методами withTrashed(), onlyTrashed() и restore()
✅ Применение Prunable для автоматической очистки базы данных
✅ Тестирование soft delete с использованием встроенных assertion-методов

Материал будет полезен как для внедрения мягкого удаления в новых проектах, так и для рефакторинга существующего кода.

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

📱 @dev_notes_ru

#Laravel #Eloquent #PHP #SoftDelete

Как сделать Laravel-контроллер тестируемым и перестать бояться рефакторинга

Вы уверены, что ваши тесты действительно что-то тестируют? 🤔

Представьте: вы случайно (ну, бывает) закомментировали ключевой вызов сервиса в контроллере подписки. Прогоняете тесты — все зеленое! Отличная работа, можно деплоить. А подписчики в это время не подписываются. Знакомое чувство ложной безопасности?

Статья как раз об этой проблеме: когда тесты проверяют ответ, но игнорируют поведение. Разобрал на живом примере, как один new в контроллере делает ваш код непроверяемым.

Что внутри:

🔹 Почему создание сервисов через new — путь к хрупким тестам.
🔹 Как внедрение зависимости (Dependency Injection) спасает ситуацию.
🔹 Прием с resolve() для "легаси-кода", когда менять сигнатуру метода нельзя.
🔹 Сравнение $this->mock() и чистого Mockery — чувствуем разницу.

Если хотите писать тесты, которые находят проблемы, а не просто «проходят», — заглядывайте.

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

📱 @dev_notes_ru

#Laravel #TDD #PHP

Интернет без adblocker

📱 @dev_notes_ru

#Joke

📱 @dev_notes_ru

#Joke

Приёмы работы с PostgreSQL, меняющие архитектуру решений

Когда речь заходит о проверке целостности данных, например, запрете пересекающихся интервалов бронирования, возникает вопрос: где разместить эту логику? В коде приложения или на стороне базы данных? PostgreSQL предоставляет инструменты, которые позволяют делегировать такие проверки уровню СУБД, снижая нагрузку на прикладной код и минимизируя риски состояний гонки.

В статье рассматриваются:

✅Ограничение EXCLUDE — декларативный способ запретить пересечение интервалов без дополнительных проверок в коде.
✅Генерируемые колонки (GENERATED) — вычисление производных значений непосредственно в базе.
✅Рекурсивные CTE — обход иерархий и графов в несколько строк вместо императивных конструкций.
✅JSONB и композитные типы — сравнение подходов к моделированию гибких структур данных.

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

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

📱 @dev_notes_ru

#PostgreSQL #SQL #Database

Практическое руководство по элементу <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 #автоматизация #инструменты