Новости

• в 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 с запросом контента из внешнего ресурса (топчик!), Server Islands для отложенного рендеринга с сервера (сложна), а также фича 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 перед попыткой отправки