Веб-стандарты

Пламени нужны три синусоиды. Кармен Ансио разбирает анимацию спички на канвасе: от карандашных набросков до кода. Пламя состоит из трёх капель, нарисованных через quadraticCurveTo, которые качаются тем меньше, чем ближе к основанию. Одна синусоида похожа на маятник, а три с разными частотами дают живое мерцание, которое повторяется только через 21 секунду. Фазы зажигания, горения и затухания управляются конечным автоматом с учётом prefers-reduced-motion. #animation #js https://www.carmenansio.com/articles/matchstick-flame-canvas/

Передаём sibling-count() родительскому элементу. Темани Афиф показывает, как родителю узнать, сколько у него детей. Функция sibling-count() считает соседей, а не детей, поэтому он добавляет лишний элемент шириной в sibling-count() и с помощью анимаций по скроллу, view-timeline и timeline-scope превращает её в переменную --n на родителе. Пригодится для счётчиков, почти квадратных сеток с sqrt() и круговых раскладок. Пока только в Chrome и Edge. #css #scroll https://blog.master.dev/transferring-sibling-count-to-a-parent-element/

Developer Signals: влияйте на то, что браузеры сделают дальше. Рик Вискоми запустил инструмент, где можно посмотреть 354 будущие веб-фичи, отфильтровать их по поддержке в браузерах и проголосовать за нужные. Есть два направления: вечнозелёные фичи и предложения для Interop 2027. Голоса и сценарии использования через GitHub попадают прямо в репозиторий группы WebDX, чтобы помочь браузерам расставить приоритеты. #interop #browser https://developer-signals.dev

00:01:23 Новинки Firefox 157 00:31:40 Стилизация тултипов 01:02:16 State of Devs

Выпуск №547. Никита Дубко, Вадим Макеев и Алексей Симоненко про новинки Firefox 157, стилизацию тултипов и State of Devs. — Лайв на Ютубе — Слушайте на Ютубе — Ссылки на сайте

Кризис среднего возраста у JavaScript. Марун Байдун разбирает, как Rust, Go и Zig захватывают инструменты JavaScript. Пока линтеры и форматтеры были на том же языке, что и код, любой мог их отладить и починить. Бандлер, переписанный на Rust, быстрее, но поддерживать его могут меньше людей. Мы компилируем JavaScript на Rust, чтобы получить JavaScript для движка, написанного в основном на C++, то есть прокладываем всё более быстрые рельсы для медленного поезда. #js #tools https://maroun-baydoun.com/blog/javascript-midlife-crisis/

Результаты опроса State of Devs 2026. Саша Грейф и Devographics опросили 5463 разработчиков обо всём, кроме кода. Главные проблемы на работе связаны с менеджментом, а 62% сталкивались с выгоранием. Большинство пишет основную часть кода с помощью AI, но мнения о нём разделились поровну, и лишь 23% считают, что он хорошо повлиял на их ментальное состояние. Больше всего беспокоит изменение климата, а об индустрии говорят с усталостью и разочарованием. #stateof #survey https://2026.stateofdevs.com/en-US/

Новинки Firefox 157 для разработчиков. Функция at-rule() в @supports проверяет поддержку директивы, например at-rule(@scope), и работает в функции supports() директивы @import. У свойств overscroll-behavior появилось значение chain: прокрутка передаётся другой прокручиваемой области, но без стандартного отскока. Animation.reverse() теперь запускает анимацию с playbackRate 0. За флагами: ML-KEM в Web Crypto и опция navigate у уведомлений. #firefox #browser https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/157

Как ускорить сайт, отправляя больше CSS. В блоге GitHub Джош Блэк и Мари Лукка рассказывают, как дизайн-система Primer перешла с CSS-in-JS на CSS-модули. Пропс sx создавал рантайм-нагрузку, которая росла с числом компонентов на странице, поэтому команда выкатывала обе версии за флагами и сравнивала скриншоты визуальных тестов. Итог: серверный рендеринг страницы стал быстрее на 55%, а инициализация компонентов — на 25%. #css #performance https://github.blog/engineering/architecture-optimization/improving-site-performance-by-shipping-more-css/

Новинки Chrome 154. Новое свойство text-decoration-inset задаёт, где начинаются и заканчиваются подчёркивания, надчёркивания и зачёркивания, а отрицательные значения выводят их за пределы текста. У свойства scroll-marker-group появились режимы links и tabs, которые задают порядок фокуса и ARIA-семантику маркеров прокрутки. Элемент <iframe> умеет подстраиваться под контент через frame-sizing, а в JavaScript появился Iterator.includes(). #chrome #browser https://developer.chrome.com/release-notes/154