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

Новости

  • опубликован первый черновик CSS Values and Units Module Level 5 Working Draft, пожалуй, самое долгожданное нововведение — это возможность использовать функцию attr() не только в свойстве content, а с любым другим свойством: <span data-length="4"/> span { width: attr(length em, 0px)}, чтобы не инлайнить в style
  • вышла версия Express.js 5.0: удалена часть методов; изменён паттерн-матчинг роутов: было /user*, стало /user(.*); при ошибке в асинхронных функциях теперь не нужно вручную вызывать next(err); минимальная версия Node.js теперь 18
  • вышла версия verdaccio v6.0 (приватный npm-реестр): дропнута поддержка Node 14, 16
  • выпущен Deno 2.0 Release Candidate: лучше поддержаны cjs-модули; ещё более тесно сынтегрировались с npm; добавили тестирование примеров в коментах JSDoc (тайпчек и выполнение); поддержали новый TS 5.6
  • а вот в Node.js наоборот двигаются в сторону прекращения поддержки cjs-модулей, флаг --experimental-require-module перестаёт быть экспериментальным

Проекты

  • qrcode — либа для генерации QR-кода в браузере (отрисовывается в canvas) или Node.js в рантайме
  • schedule-x — полноэкранный календарь аля Google Calendar с интеграциями в React, Vue, Angular
  • react-diagrams — генерация диаграмм, много гибкости и настроек

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

JS

  • манимальный докер-конфиг для «контейнирования» Vite-приложения (используется busybox для минимального рантайма)
  • что по дата-фетчингу в React в 2024: фетч в серверном компонента, проброс промиса в клиентский компонент и резолв данных с помощью use — в теории красиво, но пока всё ещё экспериментальная фича; React Query для SPA и клиентских компонентов; trpc для создания типобезопасной API-прослойки, но требует Node.js и TS на бэкенде
  • в React в зависимости useEffect можно не включать сеттер useState, диспатчер useReducer и useActionState, ссылку useRef и useEffectEvent, так как они и так стабильны, то есть ссылаются каждый рендер на один и тот же объект; если говорить про сторонние хуки типа useAtom из Jotai или useMutation из tanstack-query, то про их «стабильность» достоверно неизвестно
  • рецепт собирания велосипеда по отложенной загрузке изображений: выносим изображение в CSS-фон, по умолчанию убираем все фоны спец классом deffered, при попадании изображения во вьюпорт (хэндлим через IntersectionObserver) убираем класс deffered и задаётся актуальный фон
  • AbortController API позволяет прерывать fetch-запросы (также по таймауту), убирать все event-listener-ы разом, а также несколько контроллеров можно сгруппировать через AbortSignal.any (как Promise.race()); такой вполне себе дизайн-паттерн: передаём контроллер извне внутрь модуля и прерываем внутренние запросы или отменяем события
  • интересная идея, как можно использовать Web Audio API для создания фингерпринта текущего устройства: с помощью OfflineAudioContext создаётся осциллятор, который «рендерит» уникальную для текущего устройства звуковую волну, затем она преобразуется в строку и из строки генерится хэш
  • пример реализации шины событий на React/TS: иногда по тем или иным причинам, например, чтобы избежать проп-дриллинга или чтобы связать (не увеличивая coupling) совсем разнесённые части одной системы, выгодно создать собственный канал межмодульного общения посредством событий — эта реализация шины в React выглядит хорошо и минималистично
  • подход к организации React-компонентов, чтобы заключать дочерние подкомпоненты в родительский «неймспейс» типа <Card.Header> может создавать проблемы с сериализацией (актуально для серверных компонентов) и с тришейкингом, но если приготовить его правильно, то тогда проблем не будет:
card.tsx
export function CardRoot() {}


// namespaces.ts
export { CardRoot as Root } from "./card";


// index.tsx
export * as Card from "./namespace";

CSS

  • свойство content-visibility — наколеночное средство виртуализации большого количества DOM-элементов (>40k), которое может ограничить размеры области для рендера, внутри которой происходит обычная отрисовка, а на всё вне этой области браузер не тратит драгоценные ресурсы (заодно выяснилось, что loading="lazy" не такой уж и бесплатный, а велосипед с IntersectionObserver работает лучше)
  • появилось предложение добавлять :root { interpolate-size: allow-keywords; } в базовые стили проекта, чтобы была возможность анимировать от числа до ключевого слова (например, auto) — жаль пока работает только в последнем Chrome

HTML

  • вообще-то это пост с несмешными IT-шутками, но напомнил мне о существовании <input type="hidden">, который раньше как-то часто использовался при клиент-серверном взаимодействии, а в последнее время стал как-то позабыт