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

Проектируете модальные окна? А знаете, чем они принципиально отличаются от не-модальных диалогов? 🤔

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

В новом материале разобрали тему от и до:

✅ Алгоритм выбора: три вопроса, которые переводят проектное решение из разряда «по ощущениям» в разряд обоснованных критериев.
✅ Техническая реализация: что нативный <dialog> делает за вас, а за что всё ещё отвечаете вы (спойлер: возврат фокуса — за вами).
✅ Стилизация и анимация: важное ограничение transition и как его обойти.
✅ Чек-лист доступности: 20+ пунктов для проверки перед релизом.

Бонус: Разбор вложенных модалок, работы с кастомными контролами и обработки длинного контента.

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

📱 @dev_notes_ru

#a11y #Frontend #CSS #HTML #JavaScript

Как писать CSS с @scope: Полный разбор синтаксиса, изоляция стилей и donut scoping

Помните головную боль с переопределением стилей во вложенных компонентах? Когда в навигации нужно стилизовать ссылки, но не трогать те, что внутри выпадающих меню? Раньше — сбросы и !important. Теперь — нативный @scope.

🔥 Событие, которого мы ждали годы: последний из мейнстрим-браузеров (да, Firefox) включил поддержку @scope. Это значит, что технология получила статус Baseline и готова к продакшену.

В новом материале — только практика, без воды:
🔹 Как работает donut scoping (скоуп в виде бублика)
🔹 Где писать @scope: во внешних CSS или прямо в HTML-компонентах
🔹 Чем :scope в CSS отличается от :scope в JavaScript

Код можно копировать и вставлять в проект уже сегодня.

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

📱 @dev_notes_ru

#CSS #Frontend #JavaScript #scope

JSDoc на практике: как добавить типизацию в JS-проект без TypeScript

Наверное, каждый сталкивался с дилеммой: хочется типизацию, но втягивать TypeScript в проект и настраивать сборку ради этого — слишком жирно. Есть ли золотая середина?

Да, и это связка JSDoc + TypeScript Compiler. Без единого .ts файла, но с полноценной проверкой в редакторе и CI. Разобрал реализацию этого подхода в проекте Kelp (автор — Крис Фердинанди). Делюсь выводами и настройками:

🔹 Как настроить tsc для работы с ванильным JS.
🔹 Как типизировать переменные, функции и DOM без боли.
🔹 Как собирать кастомные типы через @typedef и не плодить дубли.

Код по-прежнему работает прямо в браузере, а ошибки отлавливаются на этапе написания.

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

📱 @dev_notes_ru

#jsdoc #JavaScript #TypeScript

Смотрю на код написанный вчера

📱 @dev_notes_ru

#Joke

Бэкенд разработчик пытается писать CSS код

📱 @dev_notes_ru

#Joke

Fluid-типографика: полное руководство по созданию адаптивных и доступных текстов

Вы когда-нибудь увеличивали масштаб страницы (Ctrl/Cmd +), чтобы прочитать текст, но ничего не происходило? 🧐 Это не баг, а особенность «адаптивной» верстки, в которой размер привязан только к ширине экрана.

Хорошая новость: современный CSS позволяет сделать так, чтобы текст одновременно:

✅ Плавно подстраивался под экран
✅ Уважал личные настройки шрифта
✅ Проходил WCAG 1.4.4 (доступность)

В новой статье разобрали подход от простых медиазапросов к сложной, но элегантной системе на clamp() и pow(). В конце — готовый чек-лист и формула, которую можно скопировать в проект.

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

📱 @dev_notes_ru

#CSS #Frontend #A11y

Итераторы в JavaScript: подробное руководство с примерами

Вы точно пользуетесь итераторами каждый день — в for...of, spread-операторе, деструктуризации. Но сможете сходу объяснить, чем итерируемый объект отличается от итератора? 🤔

Если в голове каша из терминов «протокол итерации», Symbol.iterator и next(), вот чёткое объяснение с примерами:

✅ Чёткое разделение: iterable vs iterator — больше никакой путаницы
✅ Как работают keys(), values(), entries() на самом деле
✅ Почему итераторы не создают копии данных в памяти (и когда это критично)
✅ Современный Iterator.from() и ленивые методы (take, drop, filter)

И да, аналогия с книгой и закладкой действительно объясняет всё.

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

📱 @dev_notes_ru

#JavaScript #Итераторы

Обработка параметров в JavaScript обработчиках событий

Вопрос управления обработчиками событий часто недооценивают, пока не возникает проблема с утечками памяти в SPA. Когда обработчику требуется передать параметры (например, ID сущности), стандартные подходы перестают работать предсказуемо, а удаление таких обработчиков становится нетривиальной задачей.

В новой статье системно разобрали эту тему:
✅ Почему нельзя просто написать addEventListener('click', deleteTask(id))
✅ Как работают замыкания и AbortController для передачи параметров
✅ Когда делегирование событий производительнее индивидуальных обработчиков
✅ Шпаргалка: 4 вопроса, которые помогут выбрать правильный паттерн

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

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

📱 @dev_notes_ru

#JavaScript

👩‍💻 Laravel v12.53.0: Гибкость схем, работа с очередями и производительность

Команда Laravel выпустила обновление v12.53.0. Этот релиз получился насыщенным: он добавляет новые возможности для работы с JSON-схемами и очередями, исправляет ряд неприятных багов и содержит несколько важных внутренних улучшений.

Ключевые нововведения

🔹Контроль параллелизма с любым кэшем: Добавлен метод Cache::funnel() для ограничения одновременного выполнения задач (throttling) с использованием любого драйвера кэша. Раньше такая возможность была только у Redis через RedisThrottle, теперь она универсальна (#58439).
🔹Улучшена работа с JSON Schema: Добавлена поддержка ключей multipleOf для числовых типов (#58903) и uniqueItems для массивов (#58922). Это делает генерацию и валидацию сложных JSON-схем более точной и стандартизированной.
🔹Полнотекстовый поиск по векторам: В whereFullText() добавлена опция для работы с предварительно вычисленными tsvector колонками в PostgreSQL. Это ускоряет поиск, если векторы обновляются не в реальном времени (#58893).
🔹Именованные аргументы в событиях: Теперь при диспатче событий и их трансляции можно использовать именованные аргументы, что повышает читаемость кода при работе с конструкторами событий (#58913).
🔹Поддержка сериализуемых классов в кэше: Внесены доработки для корректной работы с классами, реализующими интерфейс Serializable, при помещении их в кэш (#58911).

Существенные исправления

🔹Исправлена сериализация моделей в очередях: Устранена проблема, из-за которой при определенных условиях сериализация модели в задании очереди могла работать некорректно (#58939).
🔹Исправлена работа RetryCommand для SQS FIFO: Команда повторной обработки проваленных заданий теперь корректно работает с очередями SQS FIFO (#58936).
🔹Устранена проблема с deadlock в транзакциях: Добавлен откат "зависшей" PDO-транзакции перед повторной попыткой коммита при deadlock. Это повышает надежность работы с БД в высоконагруженных сценариях (#58906).
🔹Исправлена гонка при создании кэша real-time фасадов: Устранен редкий баг, который мог приводить к ошибкам при конкурентном создании файла кэша для фасадов (#58947).

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

🔹Тестирование сессий: Метод assertSessionHasAll() при провале теста теперь показывает все несовпадающие значения, а не только первое. Это экономит время при отладке (#58946).
🔹Очереди: В выводе команды queue:monitor теперь гарантированно отображается значение oldest_pending для лучшего мониторинга "застрявших" заданий (#58952).
🔹JSONP Check: Добавлена проверка для корректной работы с JSONP-запросами, повышающая безопасность и совместимость (#58971).
🔹Команда down: Теперь поддерживает обновление опций режима обслуживания без необходимости повторного ввода всех флагов (#58918).

Итог: Это мощный минорный релиз, который будет полезен практически всем. Обновление настоятельно рекомендуется, особенно если вы используете JSON Schema, очереди или сложную валидацию.

🖥 Полный список изменений и PR на GitHub

📱 @dev_notes_ru

#Laravel #Laravel12

Руководство по стилю объектного проектирования для PHP 8.5

Хватит писать код, который только имитирует инкапсуляцию. 🙃

В 2019-м Нобак выпустил Object Design Style Guide — манифест о том, какими должны быть объекты. В 2025-м PHP 8.5 наконец-то догнал эту философию и встроил её прямо в синтаксис.

Теперь не нужно выбирать между «правильно» и «быстро». В статье рассматриваем, как новые фичи меняют повседневную практику:

✅ Асимметричная видимость — вместо связки private field + public getter.
✅ Хуки свойств — валидация и виртуальные поля без дублирования.
✅ Clone with и readonly-классы — настоящая иммутабельность без риска ошибиться.
✅ Pipe-оператор — линейные цепочки сервисов без ада вложенности.

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

📱 @dev_notes_ru

#PHP85 #PHP

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