Новости

• математические CSS-функции round(), mod() и rem() — теперь доступны во всех браузерах: это про округление и остаток от деления одной единицы на другую; интересен юзкейс округления с определённым шагом — такой своеобразный аналог «тротлинга» в CSS, когда задаются, например, только целые или кратные 5 значения, а остальные отсеиваются
• вышел Playwright v1.45.0: на борту новый Clock API, который позволяет протестировать временные интервалы (устанавливаем время, пользователь закрыл ноут, перематываем время на 10 часов вперёд, возобновляем время, проверяем, что времязависимый код отработал корректно)
• вышел Rolldown v0.10.5: потихоньку кродёться новый бандлер на замену Rollup в Vite, в этом релизе поддержана сборка TypeScript и разных типов файлов

Проекты

• eslint-plugin-depend — плагин для eslint, указывающий на либы в раздутыми зависимостями и на использование ненужных полифиллов
• ladybird — разработка нового браузера не по карману большим бизнесам, но зато по силам энтузиастам, которые по приколу строят систему современного браузера (рендеринг-движок, JS-движок, WASM-имплементация, HTTP-клиент, эвент-луп и взаимодействие с ОС…)
• HTTP observatory — сканер HTTP-заголовков, которые отдаёт сервер вашего сайта, пишет чего нет, что есть, даёт рекомендации
• letsform — тут рекомендация не самого сервиса, а подхода генерации форм из JSON-схемы, чтоб перенять практики при необходимости сборки своего велосипеда

Статьи и демки

JS

• напоминание, что для базовой конвертации строки в DOM и DOM в строку есть 2 браузерных API: DOMParser и XMLSerializer (для ноды есть отдельные либы типа JSDOM)
• замечали, что при копипасте текста иногда он вставляется вместе со стилями? Дело в методе вставки: на событии paste метод e.clipboardData.getData('text/html') вставит текст вместе с прилагающимися стилями
• 534 и 1 способ перезагрузить страницу из JS: а на самом деле комбинации методов assign, replace и reload у location
• отменяемый fetch легко реализуется с новым Promise.withResolvers() (это правда не совсем отмена, а ранний reject), а также есть вариант с отменой с помощью AbortController
• тема с «неточным» округлением чисел крайне важная в финансовых приложениях, поэтому там можно использовать или микроприбавки Number.EPSILON к числам перед округлением, или спец либы типа currency.js, на которой в итоге и остановился автор, чтобы избежать проблем
• Deno, Bun — это конечно хорошо, но всё таки стоит их воспринимать как надстройками над Nodejs и не использовать проприетарные API, держать в уме, что должно быть можно сфолбечиться к базовому API Nodejs
• как в JS проверить наличие нужной браузерной фичи: CSS-фичи преимущественно с помощью CSS.supports(), HTML-фичи через наличие в DOM-е определённых интерфейсов

CSS

• если принять тот факт, что в tailwind излишне выкрутили идею утилитарных классов, сделав примитивы слишком низкоуровневыми, и попытаться переосмыслить идею, то получится такое разделение: оформительские (.card, .aside), лейаут (.center, .cluster), отступы (.gap-s, .gap-m); классы примитивы более высокоуровневые и из них приятно собирать композиции
• если сделать фон из конического градиента и сдвигать его транзишном, а также применить к нему mix-blend-mode: screen, то текст будет плавно проявляться «из маски»
• короч, это не учебная тревога: в канареечный Chrome завезли height: calc(auto), чтобы транзишном можно было плавно изменять высоту с height: 0 до актуальной без хаков

HTML

• статья, что не стоит использовать aria-hidden="true" на интерактивных элементах, также напоминает, что существует и поддерживается во всех браузерах атрибут inert, который «выключает» интерактивный элемент (на него нельзя нажать, дотабать или найти через средства доступности) — хороший юзкейс для ограничения пределов фокуса при показе модальных окон