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