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

Новости

• Vercel поглощает компанию Tremor (опенсорсная UI-либа на React, TW, Radix), чтобы использовать дашборды/чарты у себя в админке и в генераторе интерфейсов v0
• вышел Astro 5.2:
  • поддержан TW 4 через плагин @tailwindcss/vite
  • добавлен редирект с trailing-slash урлов: /about/, /about или даже /about///
  • а также редиректы на http или https, прописываемые сразу в конфиге
  • поддержан формат TOML для мета-информации в контентных файлах
• выпущен npm 11.1.0: добавлена команда undeprecate (заодно узнал, что существует команда deprecate)
• вышел набор полифиллов ES Module Shims 2.0: помимо поддержки import maps в старых браузерах эти полифиллы открывают возможность запускать type-erasable-код на TS прямиком в браузере, без компиляции
• обновился Turborepo 2.4:
  • появились эксперименты: команда boundaries (проверяет реп на следование бестпрактисам для лучшего кеширования сборки) и кеширование в watch-режиме
  • тула теперь даёт рекомендации по найденным кольцевым зависимостям в проекте
  • поддерживает новый тип конфига ESLint
• выпущен Firefox 135.0:
  • прекратилась поддержка нестандартного -moz-user-input
  • появилась поддержка JSON.rawJSON() и JSON.isRawJSON()
  • выкатили за флагом поддержку Temporal API (продвинутая работа с датами) и Prioritized Task Scheduling API (scheduler.yield() для «создания пауз» в работе эвент-лупа)
• обновился яндексовский ui-kit GravityUI до версии v7.0.0: смигрировали с popper.js на floating-ui, теперь билдится в ES2022

Проекты

• bunchee — безконфиговый бандлер для JS/TS-пакетов (все нужные данные для конфига берутся из package.json)
• jscanify — либа для сканирования бумажных документов из картинки или из потока камеры
• shapecatcher — если нужно найти unicode-символ (в том числе эмодзи), то можно его коряво нарисовать руками и поиск выдаст похожие
• node-modules-inspector — интерактивный интерфейс для изучения node_modules в проекте

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

JS

• простейший подход к сервингу, который возможно вскоре будет работать и в Node (но уже сейчас поддерживается в Deno):

// server
const myApp = async (req: Request) => {
  return new Response("Hello world!");
};

const response = await myApp(new Request("http://localhost/"));
const text = await response.text();

• Cookie Store API — асинхронное API на смену document.cookie (только Хромиум, но есть в «ночных» версия Safari и FF):

await cookieStore.set()/get()/getAll()/delete()

// а также эвент на изменение
cookieStore.addEventListener("change")

• хук useOptimistic из React 19 подходит для обработки кейсов «промежуточных» состояний интерфейса при асинхронном выполнением действий: ушёл запрос, ждём ответ, пока что оптимистично показали результат
• принцип Open-Closed (sOlid) на примере React-компонентов и хуков: добавляем новую модификацию компонента/функции, не трогаем базовый, а дополняем в новом компоненте/функции

CSS

• @starting-style можно применять в том числе для анимации показа/сокрытия <dialog> и подложки ::backdrop: чтобы они плавно показывались и скрывались без дополнительных телодвижений в коде (типа сменить туда-сюда opacity)
• при выполнении View Transition-ов страница перестаёт быть интерактивной — это из-за псевдоэлемента ::view-transition, который показывается оверлеем над всем вьюпортом; поправить это можно, выключив pointer-events для него:

::view-transition {
  pointer-events: none;
}

• многоклоночный лейаут уже в CSS сто лет в обед, но всё время был какой-то багованый; сейчас же ситуация получше, вполне годится для адаптивных лейаутов длинных текстов, когда текст «перетекает» из одной колонки в другу (кейс специфичный, но конкретно для него не годятся флексбоксы/гриды)
• для кейса, когда происходит нежелательный перенос текста (например, в кнопке), уместнее использовать min-width: fit-content, который подтянет ширину под контент и справится с задачей переноса более аккуратно, чем text-wrap: nowrap
• для послогового переноса слов используется hyphens: auto, но в дополнение есть ещё свойство hyphenate-limit-chars, ограничивающее количество символов, которые будут перенесены (только Хромиум)
• стилизация HTML-элемента <meter> под «звёздный» рейтинг: ставим на фон SVG с прозрачной «маской», заполняем цветом
• с clip-path: polygon() и transition можно сделать «скошенный» слайдер
• если вы собираете стили с помощью Vite или обходитесь вообще без билд-тулы, то дополнительно можно использовать LightningCSS в качестве минификатора + «пост»-процессора стилей (новенькие CSS-фичи в коде будут фолбечиться до стабильных)

Платформа

• история про то, как разработчик выяснил, что Zopfli лучше сжимает в формат gzip, но при этом медленнее, чем сам gzip, и попробовал «продать» эту тему в npm, чтобы сжать все npm-пакеты; его предложение не приняли, но зато теперь вы знаете, что если нужно максимальное сжатие в ущерб скорости, то есть Zopfli