Новости
- вышла новая версия Safari 18.2: поддержано свойство
text-box (text-box-trim + text-box-edge) для «подрезки» вертикальных отступов у тестовых строк; @view-transition заработал не только в пределах одного документа, но и между разных страниц; background-clip: border-area маскирует рамку нижележащим слоем; теперь работает деление на единицы измерения в calc(100vw / 1px); поддержаны scrollbar-width и scrollbar-gutter для стилизации скроллбаров; добавлена функция Scroll to Text Fragments; поддержан <input type=week>; у PointerEvent появился метод getPredictedEvents() для предсказания будущих позиций курсора; поддержан Promise.try - в Mozilla представили новый брендинг с консольным динозавром-флажком, а также наняли три новых топа: в Firefox выходят вице-президент FF и вице-президент по продукту FF, а также вице-президент по инфраструктуре
- CSSWG подытоживают год и выкатывают новые FPWD: Display 4, Overflow 5, Multicol 2 и Color HDR 1, из интересных нововведений: reading-flow для управления порядком чтения контента скринридером в flex- и grid-контейнере; интерполяция и анимация свойства
display; псевдоэлемент ::column в многоколоночном контейнере; свойство scroll-marker-group и группа псевдоэлементов ::scroll-marker-* для стилизации скролл-контейнера; управление яркостью HDR-контента- вышел отчёт Cloudflare Radar 2024: HTTP/2 вдвое опережает HTTP/3; React, Next.js — самые популярные фреймворки; PHP вдвое популярнее Node.js; для создания API Go используется чаще Node.js; Yandex — второй по популярности поисковик — подсдал к концу года; среди браузеров Chrome держится на 65%, потом идёт Safari, Edge, а у Firefox 4% пользователей; в северных странах преобладает десктопный трафик, в Афркие, Индии, Южной Америке — мобильный
Проекты
- skia-canvas — «безбраузерная» реализация API canvas для node или десктопа на GPU
- html-react-parser — парсер HTML в React-компонент
Статьи и демки
JS
- общение компонентов на основе событий помогает избежать проп-дриллинга или связывает разнесённые части одной системы; есть простой вариант хука useEvent (создаёт эвент и отдаёт диспатчер) или более сложный в виде шины событий
- порой бывает нужно сделать небольшой проект, куда тянуть бандлер вместе с процессом билда не обязательно: для локального сервера и HMR сгодится
browser-sync, сторонние пакеты можно загрузить с unpkg.com/npm и прописать алиасы в <script type="importmap">; TS заменяется на JS + JSDoc, tsc проверяет код на соответствие типов- в
ref элемента в React можно передать функцию, в параметре которой будет DOM-нода и в React 19 ref-функция теперь может возвращать cleanup-функцию, как в useEffect- вслед за React 19 вышел Next 15.1 со свежим React на борту (для Pages Router ещё можно React 18), улучшен дебаг ошибок
CSS
- в бете Tailwind 4 был представлен механизм стилизации дочерних элементов из заданного варианта родителю
<div class="**:data-avatar:rounded-full"> (все дочерние элементы с атрибутом data-avatar будут скруглёнными), что дизраптит саму идею атомарных классов, помещая в classname «мета-CSS» и давая возможность использовать фреймворк ещё более противоестественным способом- с тех пор, как иконочные шрифты стали считаться анти-паттерном, технологии пошли вперёд: появились вариативные и цветные COLR шрифты, хорошо сжимающий формат
woff2 и font-display стали повсеместно поддерживаемыми, в content появился alt-текст для скринридеров; тем не менее шрифт может не загрузиться или может быть проигнорирован системой, поэтому SVG — всё ещё лучший вариант для веб-иконок-
color: lch(from var(--bg) calc((49.44 - l) * infinity) 0 0) автоматически меняет цвет текста с чёрного на белый в зависимости от цвета фонаПлатформа
- в девтулзах Chrome 131 теперь помечаются те анимации, для которых не задействовался процесс «композитинга» (анимация
height или кастомного свойства)- если знаешь особенности платформы, базового языка (JS, CSS, HTML) и браузеров, становится легче кастомизировать вещи в рамках фреймворков, находить и фиксить баги, решать проблемы проще
@web_platform | Поддержать канал 🤝