Пульс веб-платформы 11.04.2025

Новости

• на ближайшем заседании Ecma TC39 будет обсуждаться в том числе пропоузал ECMAScript enums (stage 1): кажется это хитрый план, как сделать enum-ы легальными в JS, и тогда не придётся их болезненно выпиливать из TS при будущем «встраивании» TS в браузеры
• парни из e18e продолжают участвовать в улучшении фронтенд-экосистемы и напоминают о полезных проектах для авторов пакетов:
  • arethetypeswrong — анализирует пакет на предмет наличия проблем с конфигурацией TS-типов
  • publint — линтер package.json в пакете
  • node-modules.dev — анализ зависимостей node_modules
  • eslint-plugin-depend — плагин для eslint, находящий раздутые зависимости и ненужные полифиллы

Проекты

• git-mcp — меняем урл github-репозитория (github.com/username/repo → gitmcp.io/username/repo) и получаем удалённый MCP-сервер, подключенный к этому репо «на лету»
• Lighthouse Scoring Calculator — наглядный калькулятор того, как отдельные метрики влияют на очки в Lighthouse (самое большое влияние у CLS, TBT, LCP)

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

JS

• напоминание, что помимо Clipboard API существует ещё Web Share API (которое пока недоступно в FF), но в режиме прогрессивного улучшение вполне сгодится
• и ещё одно напоминание о полезных API, о которых постоянно забываешь:
  • в "".replace() и "".replaceAll() можно передавать колбек и модифицировать заматченный текст
  • Promise.withResolvers() позволяет «вытаскивать» наружу resolve и reject при создании промиса
  • [10,20,30].at(-1) вернёт последний элемент массива
• а также, как вы догадываетесь, ещё одно напоминание:
  • Object.groupBy() и Map.groupBy() сгруппируют элементы по переданному ключу
  • FinalizationRegistry стриггерит событие в момент, когда объект будет подчищен garbage collector-ом из памяти
• что можно сделать, чтобы уменьшить размер основного React-бандла:
  • прочекать файлы на сайд-эффекты (window.someBadSideEffect = 'hello')
  • не импортировать объект/класс из внешних пакетов целиком, лучше отдельными функциями
  • в React использовать React.lazy для ленивой подгрузки компонентов
  • импортировать не нужные сразу либы динамически:

const Fuse = import("fuse.js").then((module) => module.default);

CSS

• currentColor или даже cUrrENtCoLOr хорошо подходит для проброса цвета внутрь инлайн-SVG (хотя то же можно сделать и кастомным свойством)

nav {
  color: salmon;

  svg.icon {
    fill: currentColor;
    filter: drop-shadow(0 1px 0 oklch(from currentcolor calc(l - 0.25) c h));
  }
}

• свежеиспеченная функция clip-path: shape() (поддерживается в Chrome и Safari) позволяет более декларативно и человекочитаемо описывать формы по сравнению с clip-path: path()
• трюк, как сделать фоновые изображения полупрозрачными: если фон под изображением одноцветный и равномерный, то можно слить картинку через режимы наложения:

background-image: url(image-one.jpg), url(image-two.jpg);
background-color: rgba(255, 255, 255, 0.6);
background-blend-mode: lighten;

• не забываем, что если завернуть любой селектор в :where(), то у него будет нулевая специфичность (годится для всяких ресетов) + годное свойство text-decoration-skip-ink для тюна подчёркивания ссылок:

:where(a:not([class])) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

HTML

• так как md поддерживает HTML внутри, то в него можно вставить тег <picture> c разными вариантами картинки для тёмной/светлой темы:

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="dark-mode-image.png" />
  <source media="(prefers-color-scheme: light)" srcset="light-mode-image.png" />
  <img src="default-image.png" />
</picture>

Платформа

• незаслуженно забытый паттер проектирования Use-case, код читается как «история», вызов отдельных функций складывается в повествование:

const validatedorder = validateAndCoerceOrder (orderRequest);
const orderWithPricing = calculate0rderPricing(validated0rder);
const purchasingCustomer = await assertCustomerHasEnoughBalance (orderWithPricing);
...

• прикольная история про то, как падение тестов Jest привело разработчика к шуточной программе sl, которая была создана для тех, кто напечатал команду sl вместо ls и выводит ASCII-паровоз в консоль (да уж, что только не прилетает вместе с node_modules к вам в комп)