в Safari Technology Preview 202 поддержано CSS-свойство scrollbar-width, добавлена возможность анимации для нечасто встречающихся свойств, доработан API PointerEvent, а также появилась поддержка garbage collection в WASM, пофикшено применение clip-path к SVG-элементам
добавлена поддержка Promise.try (тест функции возвращает ли она промис без её вызова), жаль пока Chromium-only, но полифиллится
CSS-свойство zoom теперь стандартизированное и кроссбраузерное (кстати, и в FF 126 тоже)
вышел Firefox 130: поддержана технология WebDriver BiDi (Puppeteer теперь работает с Firefox «нативно»), а также множественные <details> с одинаковыми name (HTML-аккордеоны), больше ничего интересного
в будущих версиях Chrome будет раскатана новая экспериментальная версия панели Performance в дев-тулзах: в ней по умолчанию будет показываться информация о Web Vitals (сейчас инфа доступна через отдельный браузерный плагин), а также станет можно записывать процесс с заданием тротлинга прямо из панели
в React-команде начали разбираться с ситуацией блокировки отрисовки фоллбека при использовании <Suspence>: теперь сначала будет показываться фоллбек, а потом уже запускаться рендер
анонсирован Vue 3.5: давно не заглядывал внутрь, заглянул, а там внутри React 🙂: useId() для генерации уникальных наборов символов, useTemplateRef для создания динамических рефов, onWatcherCleanup для очистки «эффекта» (аналог возвращаемого колбека в useEffect), но есть и того, что в React нет — более тесная интеграция с веб-компонентами
Проекты
style-observer — аналог API MutationObserver, но позволяющий отследить изменение значения определённого CSS-свойства, например, переменной: под капотом для всех отслеживаемых свойств создаётся подписка на событие transitionstart и если значение свойства меняется, то триггерится и микро-транзишн, по которому срабатывает колбек (только для браузеров поддерживающих transition-behavior: allow-discrete)
reasonable colors — простая, доступная, контрастная палитра в CSS/SCSS
Статьи и демки
JS
e2e-тестирование хорошо тем, что тестирует реальный интерфейс, который увидит и пользователь, но тесты выполняются медленно, представляют собой чёрный ящик без доступа внутрь и не покрывают всех состояний и сценариев; в Storybook предлагают альтернативный подход — компонентное тестирование: вместо того, чтобы прогонять целый большой сценарий, берутся стори-компоненты, мокаются данные и проверяется соответствие всех состояний компонента «образцовым» в сторибуке (выглядит прикольно, но лочит на API @storybook)
обычно при старте нового проекта файл tsconfig.json копируется из предыдущего, а если вам хочется наконец настроить его осознанно, пригодится шпаргалка по tsconfig.json от Matt Pocock: варианты опций с транспиляцией и без, билда для библиотеки (в том числе в монорепе), если проект живёт в DOM или нет
с помощью неказистого на первый взгляд свойства background-clip можно, например, сделать так, чтобы одно фоновое изображение «выглядывало» из-под другого, а если это «нижнее» изображение — это анимированный конический градиент (с динамическим параметром угла), то выйдет спецэффект «сверкающей» кнопки
разбор display: contents и его юзкейсы: «стилевое устранение» нежелательной обёртки в сгененированной разметке .content p:has(img) {display: contents} или «реструктуризация» разметки при адаптивной перестройке
Платформа
однажды один разработчик сделал сайт One Million Checkboxes, где любой желающий мог нажимать на чекбоксы, результат сохранялся в БД и был виден другим людям; так вот люди начали рисовать на этом холсте 1000Х1000 «пикселей-чекбоксов» картинки и даже «видео», а также кодировать из комбинаций выделенных (1) и пустых (0) чекбоксов побитово символы ASCII и составлять из этих символов URL на свой фанатский дискорд-сервер, куда и пришёл познакомиться создатель сайта
