Виталий и Платформа: “#Пульс_веб_платформы 07.03.2025 🖇️ Полностью в вебе Новости 🔡 вышел…”

#Пульс_веб_платформы 07.03.2025

🖇️ Полностью в вебе

Новости
🔡 вышел TS 5.8, с момента RC изменений нет: require(esm) ( + флаг обратной совместимости --module node18) и флаг --erasableSyntaxOnly на борту
🔡 вышел Safari Technology Preview 214: внутри долгожданная поддержка data: URL в favicon, то есть теперь можно будет во всех браузерах использовать SVG- и эмодзи-фавиконки:


<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,[YOUR ENCODED SVG HERE]" />

🔡 вовсю идёт работа по внедрению rolldown в Vite
🔡 вышла стабильная версия TanStack Form v1 для основных фреймворков:
🔵 TS валидирует связку модели данных и значения в компоненте, причём не нужно передавать дженерики, а всё инферится з коробки
🔵 встроеная поддержка валидационных либ (Zod, ArkType…)
🔵 есть возможность задать асинхронную функцию для валидации

🔡 выпустили черновик спеки CSS Form Control Styling Level 1 про стилизацию элементов форм: appearance: base для базовой стилизации элементов, псевдоэлементы ::picker, ::thumb, ::track, ::fill и другие для стилизации UI-элементов
🔡 вышел мартовский апдейт React Aria/Spectrum с компонентами Toast, Tree и Virtualizer, также допилен хук usePress и компонент Autocomplete
🔡 вышел Chrome 134:
🔵 добавили возможность добавлять внутрь <select> дополнительные элементы помимо <option>, <optgroup> и <hr>
🔵 допилили вариации закрытия <dialog>
🔵 дополнили обратносовместимо console.timeStamp()

🔡 в Chrome 135 будет внедрён пропоузал Observable API (позиции WebKit и Mozilla по поводу этого API пока неясны):


container
 .when('click')
 .filter((e) => e.target.closest('a'))
 .subscribe({
  next: (e) => {
   // …
  },
 });

Проекты
🔡 React Scan Inspector — инструмент для анализа перерисовок React теперь в виде Chrome-плагина
🔡 openapi-fetch — типизированный fetch-клиент, согласующийся с OpenAPI схемой
🔡 CSS Voxel Editor — трёхмерный «пиксельный» редактор на базе CSS-трансформов и гридов (тут про движок)
🔡 CSS Puzzle Box — головоломка, написанная на HTML/SVG/CSS (тут про процесс создания), наполненная трюкохаками, например, «самоскрывающимся» <details>

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

JS
🔡 parseInt('1️⃣') === 1 // true, потому что внутри parseInt находит в unicode-символе сначала 1, а последующий нечисловой «вариационный» символ отбрасывается

CSS
🔡 <input type="range"> превращается в «звёздный рейтинг», чем удобно: использует нативное управления с клавиатуры, а также инпут имеет нативные атрибуты min, max, step, значения которых пробрасываются в CSS через новоиспечённый attr
🔡 только привыкли к функциям-дженерикам в TS, а как вам функции в CSS (пока что почти что фэнтези-синтаксис)?


@function --dashed-border(--color: red) {
  result: 2px dashed var(--color);
}

.argument {
  border: --dashed-border(blue);
}

.default {
  border: --dashed-border();
}

🔡 вырезаем прямоугольную прозрачную рамку внутри картинки с помощью mask и конического градиента
🔡 кастомное свойство может быть «выключено» по умолчанию, правда это хак и синтаксис выглядит сломанным:


button {
  --has-border: ; /* off by default */
  border: 1px solid var(--is-raised, rgb(0 0 0 / 0.1));
}

.bordered {
  --has-border: initial; /* turn on */
}

🔡 эффект калейдоскопа с помощью анимации кастомного свойства (@property) внутри градиента

Платформа
🔡 полезные настройки git-а в ваш .gitconfig, например, push.autoSetupRemote true для автозадания апстрима или pull.rebase true для авторебейза при пулле
🔡 скажи что-нибудь на дедовском: — кхе-кхе, ноутбук, дискета, ajax (20 назад, кстати, был обозначен, тогда были ещё актуальны XML and XSLT)!

@web_platform | Поддержать платформу ❤️