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

Новости

  • вышел Safari 17.2, много мелких и классных обновлений в уходящий год, чтобы подбить статистику Interop 2023:
    • аккордеон на <details> + <summary>
    • onetimecode для инпутов
    • «расслабленный» CSS-nesting
    • обновления CSS Motion Path
    • функция linear() для создания «нелинейных» анимаций
    • математические функции rem(), mod(), round() в CSS
    • display: list-item
    • mask-border без префиксов
    • Custom Highlights API
    • <link rel="preload"> с атрибутами imagesrcset и imagesizes для подгрузки адаптивных изображений
    • import attributes в JS
    • fetchpriority для загрузки ресурсов
    • улучшение нативной валидации форм и ещё много других плюшек
  • анонсирован выход Million 3.0 — альтернативного VDOM для Реакта (подробно о его работе): вкратце, он берёт для реконсиляции только динамически заполняемые DOM-ноды, а на статические не обращает внимания, а затем сравнивает не сами DOM-ноды, а их состояние (что существенно быстрее); годится для случаев, когда в приложении не слишком много динамических кусков, и часть приложения в ходе работы остаётся неизменной (значит её не нужно учитывать в пересчёте)
  • вышел SVGO v3.1.0, улучшено всё, без маркетиноговых уловок сообщаю, что это просто классный проект, cli-тулза для чистки SVG от мусора
  • Storybook с 8.0 версии будет поддерживать React Server Components: минус — Next.js съест и Storybook, плюс — Storybook не будет медленно рендериться на клиенте

Проекты

  • Primer React — библиотека Реакт-компонентов Гитхаба: круто, что такие проекты выкладываются в opensource, поэтому можно почитать исходники: из интересного, у них используются styled-components и чтобы компоненты писать вот так красиво <Header.Item> делается Object.assign(Header, {Link: HeaderLink, Item: HeaderItem}) (реф)
  • eruda — эмулятор браузерной консоли и девтулзов для мобильных браузеров
  • Fuse.js — фреймворк для создания типобезопасного слоя данных между бэком и фронтом, работает поверх Ноды и gql
  • простой и честный респонсив компонент пагинации для Реакта — React Responsive Pagination
  • GQL (Git Query Language) — а как вам такое: можно делать выборки по истории гита с помощью SQL!
  • enhance — HTML-first full-stack веб-фреймворк на веб-компонентах, выглядит очень симпатично, так и тянутся руки глотнуть свежего воздуха

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

JS

  • интересная детективная история, которая начинается с того, что при изменении содержимого инпута курсор переносится в конец строки, а заканчивается кишками событийной модели Реакта и методом flushSync
  • статья о том, чем isNaN отличается от Number.isNaN(), а также почему typeof NaN это 'number'
  • как устроен React Suspense: tldr, Реакт под капотом использует новый компонент Offscreen, который как бы есть, но его как бы нет, то есть туда можно заблаговременно рендерить контент, но его не будет сразу видно (он условно скрытstyle="display: none !important;")
  • подборка текущих актуальных стейт-менеджеров: построенные на редьюсинге, атомах либо мутации, а также их плюсы, минусы и подводные камни (хотя в 90% случаев можно было бы обойтись простой useReducer + контекст)
  • хитрости в работе с Реактом от автора Wouter: патчим компоненты с cloneElement; useState, который никогда не обновляется const [value] = useState(() => { /* initializer */ }); неизменная ссылка на функцию с помощью useEvent и кое-что ещё
  • статья от Дэна Абрамова от том, как обрабатывается JSX (feels like мемуары о тех временах, когда деревья были большие и зелёные, а рендеринг был только клиентский)
  • супер-гигантская и супер-полезная статья про всё, что вам может понадобиться при работе с IndexedDB
  • использование кастомных Server-Timing HTTP-заголовков

CSS

  • кодим SVG-спиннер голыми руками без сторонней помощи (и без страховки)
  • что из CSS зарелизилось в браузерах в 2023 (огромное количество класных фич, на 2024 уже даже столько интересного не осталось): тригонометрические функции, микросинтаксис селекторов An+B, scope, nesting, subgrid, initial-letter, text-wrap, color-mix(), relative color syntax, @container и @container style(), :has(), новые возможности медиа-выражений, View Transitions API, linear(), событие scrollend, скролл-анимации с ViewTimeline, анимация дискретных свойств типа display: none, @starting-style, Popover API, <hr> в <select>, псевдоклассы :user-valid и :user-invalid, аккордеон на <details>
  • минималистическая сборка CSS с помощью Lightning CSS (немного свело олдскулы)
  • будущие нативные функции и миксины в CSS
  • SVG-адвент-календарь

HTML

Платформа