Пульс веб-платформы 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();
}
button {
  --has-border: ; /* off by default */
  border: 1px solid var(--is-raised, rgb(0 0 0 / 0.1));
}


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

Платформа