Новости
- в Font Awesome, к которому недавно присоединился Zach Leatherman с 11ty, начинает работать Lea Verou в качестве Product Lead, видимо будут продвигать Pro-иконки через движок статических сайтов + общую поддержку веб-стандартов и платформы
- выпущен Safari 18.0: в браузер добавлен блокировщик попапов (привет, дизайнеры, любящие модалки 👋); в связке с новой macOS появилась интеграция с iPhone, чтобы проще дебажить iOS на десктопе; поддержаны View Transitions и Style Queries
@container style(--background: black), а также анимация свойства display; окончательно поддержан backdrop-filter и свитч-режим чекбокса <input type=checkbox switch>; в JS появился метод URL.parse(), возвращающий null вместо исключения в случае ошибки- зарелижен Chrome 129: поддержано CSS-свойсво
interpolate-size и функция calc-size(), позволяющие анимировать значение до auto (выглядят костыльненько); добавлена поддержка Intl.DurationFormat для форматирования длительности в нужной локали; появились обещанные ранее Snap Events для колбеков snap-скроллов и scheduler.yield() для разгрузки потока от длинных непрерывных тасок- вышла Astro 5.0 Beta, в которой стабилизирована фича Content Layer с запросом контента из внешнего ресурса (топчик!), а также фича
astro:env для типобезопасной работы с env-ами на клиенте и сервере (удобно)- вышла date-fns 4.0: появилась широкая поддержка для работы с таймзонами, также автор морально готовится к грядущей эре господства Temporal API
- выпущена Fastify v5: поддерживает Node20+ (из-за лучшей поддержки
node:test), загрузки, спонсоры и контрибьюторы растутПроекты
- safe-await — либа, добавляющая возможность «распаковки» промисов
const [error, data] = await safeAwait(promiseOne())- modern-font-stacks — наборы похожих системных шрифтов на разных системах, если не нужен pixel-perfect (также есть отдельный набор шрифтов эмодзи)
- ts-blank-space — «а что так можно было?» из мира компиляторов TS->JS: все указания типов заменяются буквально символами пробела, сохраняя при этом структуру оригинального кода (поэтому не нужны сорсмапы)
Статьи и демки
JS
- чтобы побороть развесистые условия или вложенные тернарники (особенно может быть актуально в JSX), есть pattern-matching-подход (пропоузал)
- когда речь заходит про типобезопасность, не очень понятно сходу, где остановиться: на TS можно нагрузить задачу проверять корректность роутов, или, например, забахать типизацию стилей. Всё это как будто бы хорошо, то есть ради всего хорошего и против всего плохого, но при этом порождает сложности с перфомансом и создаёт переусложнённые абстракции
- в React Router есть специальное API для параллелизации запросов самого компонента и нужных данных для него
<Route path="/users/:userId" loader={loader} lazy={() => import('../components/UserProfile')} />CSS
- если ли что-то сильнее
!important? Да, это вечный транзишн, который всегда показывает окончательные стили: input { transition: background-color calc(infinity * 1s) step-end; background-color: transparent; }- разработчики Chrome на правах «законодателя мод» выкатили экспериментальную стилизацию <select> с помощью
::picker(select) {}, option::before, option:hover, option:checked {} (глядишь через пару лет наконец заборят финального босса CSS)- если применить
gap к контейнеру с <label> и <input> внутри, то в промежутке возможно появление «мёртвой зоны», в которой клик по лейлбу не выберет инпут- интересное наблюдение, что анимация кастомных свойств выполняется на CPU даже если в итоге меняется значение
transform, которое по идее должно вытаскиваться браузером в композитный слой и просчитываться GPU (лечится немного will-change, но не везде)- простой селектор предыдущего элемента
:has(+ &)HTML
- чеклист по созданию идеальных форм: естественно, это тег
<form>; инпуты с верными inputmode и autocomplete, которые часто забываются; базовая стилизация через accent-color; а также есть проверка navigator.onLine перед попыткой отправки@web_platform | Поддержать канал 🤝