Новости
- математические 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, который «выключает» интерактивный элемент (на него нельзя нажать, дотабать или найти через средства доступности) — хороший юзкейс для ограничения пределов фокуса при показе модальных окон@web_platform | Поддержать канал 🤝