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

Новости
- из MS Edge будут выпилилены свойства -ms-high-contrast media и -ms-high-contrast-adjust в угоду стандартным медиа-фичам forced-colors и prefers-color-scheme, а также свойству forced-color-adjust
- вышел React v18.3.0: добавились ворнинги на задепрекейченые фичи в React и React DOM
- анонсирован GitHub Copilot Workspace: (утопичная) идея сделать некую среду, в которой можно будет на натуральном языке планировать, обсуждать, писать, отлаживать и тестировать программы
- у Bun вышло обновление с новым crash reporter-ом, из интересного: идея в один 150-байтный URL запихнуть платформу, хэш коммита, стэк трейсы, сообщение и тип ошибки: малочитаемо, но зато очень коротко
- вышел TypeScript 5.5 Beta: TS научился выводить тайпгарды самостоятельно, появился импорт типов JSDoc в js-файлах и встроенная проверка регулярок, упрощен импорт es-модулей из пакета typescript для Ноды, опция isolatedDeclarations для изолированной компиляции d.ts, задепрекечена часть вещей
- обновился кит React Spectrum и Aria: добавлены компоненты вложенного меню, дропзоны, инпут-файла, а также компоненты для работы с цветом (пикер, ареа, слайдер, колесо)
- вышел release candidate Svelte 5: для тех, кто использует Svelte 4, всё будет будет работать быстрее, а для тех, кто использует Svelte 3, сначала рекомендуют обновиться до Svelte 4

Проекты
- extension — либа для разработки браузерных расширений, достаточно простая, чтобы запустить своё расширение командой npx extension create <your-extension-name>
- react-spring-visualizer — визуализатор анимации либы react-spring
- tagify — компонент тегов в инпуте и текстарии, умеет в поиск, сортировку, кастомизацию

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

JS
- как улучшить читаемость кода, вынеся подробности имплементации API в отдельный архитектурный слой: было — apiClient.get<UserResponse>(`/user/${handle}`), стало — UserApi.getUser(handle)
- туториал по новым фичам нового Реакта: особо хорошо выглядит use
- когда использовать Bun вместо Node: если важен перф; когда нужен швейцарский нож (раннер, пакетный менеджер, тест-раннер и бандлер в одном); когда не хочется заморачиваться с импортами, а хочется, чтобы просто работало; когда нудна встроенная БД SQLite
- объяснена тайна века, как же всё таки работает array.sort((a, b) => b - a): функция нужна, чтобы понять куда уйдёт a на числовой прямой, вправо и влево
- как собрать на коленке свой шаблонизатор на HTML и .sh, «потому что могу»

CSS
- респонсив размеры шрифта с помощью clamp(): хорошо — clamp(1rem, 2.5vw, 3rem), ещё лучше — clamp(1rem, calc(2.5vw + 1rem), 3rem)
- реализация боковых отступов в древовидном компоненте: проще всего добавить пустой элемент-спейсер с динамической шириной --spacer-col: max(8px, var(--level) * 8px)
- отрисовка нот в гридовой сетке: SVG с data-атрибутами вписывается и раскладывается по рядам и колонкам
- вендорные префиксы для каких свойств ещё остались актуальны (можно пересчитать на пальцах рук)
- оказывается можно управлять порядком отрисовки fill и stroke с помощью свойства paint-order: stroke fill (по умолчанию рисуется fill → stroke)

HTML
- официальное разрешение от Гугла: использовать popover API теперь можно!

Платформа
- великая проблема компьютерных наук — центрирование элементов (если вы думаете, что проблема в CSS или вебе, то это не так: те же проблемы есть и у дизайнеров, и в нативной платформе)

@web_platform | Поддержать канал 🤝