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

Фреймворки фремворками, а махина CSS медленно, но верно движется вперёд.

Вчера были опубликованы две новых версии черновиков CSS Box Alignment Module Level 3 и CSS Positioned Layout Module Level 3.

В Position 3 с прошлой публикации:

- уточнили концептуально, что такое static position и static position rectangle,
- а также явно прописали, что position: absolute вынуждает бокс получить independent formatting context (то есть если этот блок внутри грида и ему задали pos:abs, то субгрид внутри него выключится).

В Align 3 с прошлой публикации:

- добавлены технические правки, связанные с baseline и особенностями выравнивания по ней,
- также выравнивание при значениях space-around и space-evenly стало по умолчанию «безопасно» (то есть если такое выравнивание переполняет контейнер и приводит к обрезанию контента, то это выравнивание будет вести себя так, чтоб контент не обрезался, например, будет становиться как start),
- уточнено, что для замещаемых элементов (например, img) не будет работать внутреннее выравнивание, так как внутри таких элементов не могу содержаться другие элементы.

Также несколько дней назад был обновлён CSS Snapshot 2023, к котором в раздел «Modules with Rough Interoperability» внесли три новых спецификации:

1. CSS Conditional Rules Module Level 4
@-правила, например, @supports и @media — сейчас лучше всего поддерживаются в Firefox, в отстающих Safari.

2. CSS Cascading and Inheritance Level 5
Каскадные слои @layer — тут в лидерах по имплементации Chorome, а Firefox отстаёт.

3. CSS Scroll Snap Module Level 1
Пристыковка к скроллу — ситуация примерно одинаковая во всех браузерах.

И ещё на очереди публикация первых версий черновиков Web Animations Level 2 и CSS Animations Level 2.

UPD: Также в раздел «Safe to Release pre-CR Exceptions» был добавлен relative color syntax.

#Лаборатория_веб_платформы

Короч, FF 110 вышел, Container Queries доехали везде, теперь можно! 💫

  <div class="grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</div>

  container-type: size;
  width: 500px;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

@container (max-width: 500px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

#Лаборатория_веб_платформы

Как «прокачать» объект, чтобы он был итерируемым?

Использовать один из Well-known Symbols, а именно Symbol.iterator.

obj[Symbol.iterator] = function*() {
  for (const key of Object.keys(this)) {
    yield [key, this[key]];
  }
};

for (const [key, value] of obj) {
  console.log(`${key}: ${value}`);
}

Также есть вариант для асинхронного итерирования посредством Symbol.asyncIterator.

реф

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

В черновик спеки CSS Backgrounds and Borders Module Level 4 смерджили изменение, делающее свойство box-shadow полноценным longhand-свойством!

Теперь управлять отдельными параметрами тени можно будет не повторным переопределением всего значения box-shadow, а задавая параметры shorthand-ами:

- box-shadow-color: <color>, initial: currentColor
- box-shadow-offset: none | <length>{2}, initial: none
- box-shadow-blur: <length [0,∞]>, initial: 0
- box-shadow-spread: <length>, initial: 0
- box-shadow-position: [ outset | inset ]

Аналогичные правки ожидаются и для «текстовой» тени text-shadow.

Так получилось, что на моей нынешней работе я стал каждую неделю собирать для команды новости в мире фронта за неделю. Прошло уже несколько недель и подумал, а почему бы и да: буду публиковать подборки в этот канал. И пофиг, что некоторые не прям про платформу 😎

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

Новости
- вышел Yarn 4.0, интересного особо ничего нет, пофиксили баги, обновили ноду, причисали синтаксис
- обновилась Node v21.1.0, из интересного появился флаг --experimental-detect-module, по которому Нода сама распознает .js файлы как ES-модули, даже если для них не указан type в package.json
- все ишью для выпуска jquery 4.0.0 пофикшены (наверняка вы очень сильно ждали этого и вот, наконец, свершилось 🎉)

Проекты
- transformers.js — это самые известные модели ML в одном флаконе в виде JS, который работает даже прямо в браузере, теперь умеют ещё и конвертацию text to speech/audio

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

JS
- почему Next.js нехороший: после маркетинговой компании в поддержку Next 14, на волну запрыгивает Remix и в сравнении получается истина (Next не про платформу, несёт зависимости, нестабилен, слишком магический и комплексный)
- зато Remix больше не отдельная тула, а идёт в сторону становления плагином для Vite (и это хорошо)
- топ идея включать веб-компоненты в Markdown как валидный HTML на примере CRDT-компонента в блог-посте
- ещё один веб-компонент в виде мокового окна браузера для презентация
- Синдре Сорхус (тот самый) выпиливает из своих пакетов… 🥁 Node.js Buffer и меняет на Uint8Array, а также делится пошаговой инструкцией, если вам захочется сделать так же
- опрос State of React 2023 как обычно интересен не только будущими результатами, но и содержимым, где можно узнать названия новых хуков и реактовских API-шек
- неплохой свежеиспечённый туториал по Svelte в добавок к также недавно испечённому туториалу Next-а
- история разработки ECMAScript Decorators с самым внятным объяснением, что это такое (tldr, например, функции высшего порядка типа debounce или HOC-и типа withModal)

CSS
- новые CSS-функции rem() и mod() и где они обитают
- аналитика на CSS-коленке, беспощадная и неуязвимая
- prefers-reduced-transparency в копилку директив для тюнинга CSS-мелочей, которые почти никто не заметит
- съешь ещё этих мягких французских CSS-функций (light-dark, xywh, round, perspective) от Криса Койера
- визуальный гайд по селекторам от fffuel

HTML
- 0 из топ-100 самых больших мировых сайтов используют валидный HTML (и всем это ок)

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

Новости
- астрологи объявили неделю AI, поэтому в Гитхабе объявили начало новой реальности, GitHub Copilot теперь будет в виде чата подсказывать код, посвечивать ошибки и уязвимости, а также улучшать код, писать тесты, план работы и всё это прямо на github.com 🧙‍♂️ (отделить маркетинг от реальности правда пока ещё предстоит в декабре этого года)
- Дуглас Крокфорд (после того, как отговаривал всех писать на JS) написал новый язык Misty
- как метрики Web Vitals помогли улучшить интернет (главным образом за счёт улучшения WordPress)
- сорсмапы теперь будут генериться для прод-реакт-бандлов

Проекты
- библиотека для создания схем React Flow теперь есть и для Svelte — meet Svelte Flow
- versel выпустили свой шрифт — Geist (да, это именно для того, чтобы о них ещё раз упомянули в новостях)
- ещё одна попытка сделать норм DragNDrop либу (без привязки к фреймворку)
- новенькие React-компоненты для Goggle Maps
- больше кнопок богу кнопок (гигантская коллекция разнообразных кнопок, а также генератор кнопок на Tailwind)
- тула для визуализации сорсмапов

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

JS
- паттерн проектирования Headless Component для React UI-ев
- Compression Streams API — что это и зачем нужно (доступно во всех свежих браузерах)
- хорошая ли идея собрать React Server Components без фреймворка (автор попробовал и так не думает)
- немного обновившаяся оф дока по 'use server'
- психологическая статья про React Query, которая заставит вас захотеть использовать либу из-за легких угрызений совести
- оказывается двойной запуск useEffect в дев-режиме — это не баг, а фича
- только два слова — use-php
- небольшой учебный курс по браузерному перфомансу
- построение UI-элемента шторки (a la iOS, но на веб-технологиях)
- как более корректно «выключать» кнопки при сабмите форм

CSS
- и ещё немного про разделители в <select>: <hr>, <optgroup> и <hr> + <optgroup>
- CSS-градиенты в реальной (или всё таки фэнтезийной?) жизни
- как обойти «серые» зоны в градиентах
- угадайка про HEX-цвета
- демка про анимацию вариативных шрифтов
- на что способно CSS-свойство content-visibility

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

Новости
- ESLint обновляется до 9 версии и там будет много изменений, в том числе breaking
- появился TypeScript 5.3 RC, из интересного: поддержка Import Attributes, улучшенный narrowing для некоторых случаев, Interactive Inlay Hints, настройка для VSCode, чтобы автоимпорт типов писался так import { type Person } from "./types", а не так import { Person } from "./types"
- либа компонентов React Aria Components переходит из Beta в RC
- главной метрикой в Core Web Vitals, отвечающей за отзывчивость интерфейса, становится INP, а также другие интересности по перфомансу от HTTP Archive на 2024

Проекты
- либа для того, чтобы управлять приоритетом выпоннения тасок к основном потоке, а также бонусом Prioritized Task Scheduling API, который уже сейчас в Хроме может управлять приоритетом исполняемых тасок
- управление синхронным скроллом в нескольких скроллящихся элементах
- либа для создания 3d-космических сцен 🪐

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

JS
- набор простеньких, но полезных, демок небольших DOM-манипуляцей
- какую выбрать стратегию перевода кодовой базы на TS
- сага о том, как разработчики обратно на React с Preact переходили (Или туда и обратно)
- React Design Patterns: общеизвестные типа HOC, а также малоизвестные типа Compound Components
- как марсиане писали плагин для фигмы или Зачем фронтендерам обход деревьев
- страсти вокруг Barrel-импортов в файлах не утихают, очередной наброс
- невероятные трюки и возможности дебаггера в браузере (без шуток)

CSS
- ещё один годный разбор псевдоселекторов (:has, :not, :is, :where, &)
- свойство gap может быть полезно и в многострочных флексбоксах
- ещё один костыльный (но нормальных пока нет) вариант автоувеличивающейся textarea
- как браузеры зумят текст (tldr: неконситентно)
- если убрать list-style: none у списка, то Safari перестанет считать его списком

HTML
- гугл-шрифты, рендерящие волны и линии
- вариативный моноширинный шрифт Monaspace от Github
- HTML Web Components — не React-компоненты, меняем майндсет
- подход HTML First или Скрытая реклама htmx
- что такое URL и чем он отличается от URI, URN и URC (даже под закат фронтендерской карьеры не поздно освоить азы 👴)

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

Новости
- вышел Vite 5.0: прибрались, дропнули поддержку старых версий Node, задепрекейтили CommonJS-модули, обновили Rollup до 4
- Prettier 3.1 теперь умеет форматировать вложенные тернарники лесенкой
- вышел Firefox 121.0beta и там долгожданная поддержка :has без флага, а также менее долгожданные Lazy loading iframes и поддержка text-wrap: balance, ждём в стабильного релиза в качестве новогоднего подарка 🎁
- вышел redux-toolkit v2.0.0-rc.0, есть breaking changes
- вышел TypeScript 5.3, отличий по сравнению с RC-версией нет
- контрьбьюторам Node не понравилось выпиливание форматирования из ESLint и появилось предложение использовать Biome в качестве форматтера (это же была нативная реклама в PR, да?)
- State of JavaScript 2023 начался: как обычно мне больше всего интересна первая страница с примерами кода, но посмотреть на итоги голосования тоже будет интересно (чтоб узнать, всё ли React или ещё нет)

Проекты
- Loro — либа для реализации offline-first и CRDT-приложений
- React Datasheet Grid — либа для реализации редактируемых таблиц типа Notion и Airtable
- noscript-icons-cli — тулза для генерации SVG-спрайтов (тк использование SVG напрямую в бандлах удобно, но дорого и медленно)
- рекламный лендос возможностей веб-платформы (оч крутой) от разрабов Chrome
- обучалка основам веб-разработки (если у вас спросят, как стать разработчиком, это неплохой свежий гайд на английском)

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

JS
- Explicit Resource Management — изучение новой фичи TS и платформы using, которая может указывать движку, чтоб прибрал подвисшие в памяти процессы
- обзор легковесных JS-фремворков за пределами React-пузыря (да, там тоже есть жизнь)
- как собрать и использовать NPM-пакет вне Node, например, в браузере (олды сразу вспомнят browserify)
- инсайты разработчика аудио-приложения в браузере: интересный тейк — обработку iframe с разными доменами Chromium-браузеры могут выполнять не в основном потоке (такой Prioritized Task Scheduling API из айфреймов и палок)
- оказывается Next.js умеет обрабатывать md-файлы со встроенными React-компонентами (у меня до сих пор к этому подходу есть вопросики, намного лучше выглядит включение веб-компонентов в md)
- никогда не будет лишним прочитать гайд по именованию разных штук в JS-коде
- разные подходы на написания веб-компонентов на примерах: улучшающие код, дополняющие код и генерирующие код

CSS
- качественный гайд по CSS Nesting
- качественный гайд по CSS Grid
- качественный гайд по CSS Container queries
- и всё же, как лучше собирать CSS-файлы: в бандл, отдельными файлами или использовать @import внутри?
- возможности dev-tools для дебага разных CSS-вещей
- и почему же всё таки height в CSS так странно работает (не как width)?

#Лаборатория_веб_платформы

URL Pattern API

Это инструмент для сопоставления URL на основе шаблонов. Допустим, есть URL https://example.com/products/123. И нужно сопоставить его с шаблоном https://example.com/products/:id. Это можно сделать так:

const urlPattern = new URLPattern({pathname: '/products/:id'});
const url = new URL('https://example.com/products/123');
console.log(urlPattern.test(url)); // true

Кроме теста соответствия урла шаблону, можно ещё и извлечь соответствующие параметры:

const urlPattern = new URLPattern({pathname: '/products/:id'});
const url = new URL('https://example.com/products/123');
const result = urlPattern.exec(url);
console.log(result.pathname.groups.id); // "123"

Самый очевидный юзкейс URLPattern — клиентский роутер, который проверяет соответствие текущего урла паттерну, по которому показывается нужный контент. Пример в React:

<Router>
  <Route path="/">
    <Home />
  </Route>
  <Route path="/about">
    <About />
  </Route>
  <Route path="/messages/:id">
    <Messages />
  </Route>
</Router>

function Route({ path, children }) {
  const baseURL = window.location.origin;
  const pattern = new URLPattern({ pathname: path, baseURL });
  const match = pattern.test(currentPath);

  if (!match) {
    return null;
  }

  return children;
}

Помимо pathname URLPattern умеет определять все остальные части урла: hash, hostname, password, port, protocol, search, username.

Работает пока что только в Chromium, но полифиллится.

---

Поставьте 👾, если нужно записать видос с написанием такого простенького роутера с использованием URLPattern целиком.

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

Новости
- вышел Git 2.43 (да, такое тоже бывает): появилась возможность лучше прибираться с помощью git repack, клонировать репозитории в режиме tree-less, более гуманные сообщения при повторном revert-е, возможность отмены текущих запусков CI при новых push в CI-ветку и ещё немного ништяков
- в Node v20.10.0 (LTS) забэкпортили некоторые хорошие вещи: к примеру, режим работы с флагами --experimental-default-type, --experimental-wasm-modules и --experimental-websocket
- обновился шрифт Inter до версии 4.0: вариативность, переработанные и новые глифы (есть, в том числе, кириллица), доп OpenType-фичи (и это оперсорс и бесплатно, если что)

Проекты
- опенсорсная десктопная плиложуха для теста API bruno
- requestAnimationFrame как асинхронный итератор для любых сред исполнения JS
- крутое приложение для визуального создания анимаций Rive
- репозиторий для тренировки работы с промисами путём их имплементации

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

JS
- как создать одно приложение с использованием нескольких фреймворков (а точнее как использовать веб-компоненты для уменьшения связности, которую несут JS-фреймворки)
- обзор, как работает Web Push (оказалось, что очень завязанно на браузерных вендоров)
- как добавить немного AI для расшифровки результатов выполнения тестов
- как опубликовать реакт-компонент как ESM+CJS библиотеку с типами, а также два интересных инструмента: Are The Types Wrong? для проверки типов в опубликованной библиотеке и publint для проверки корректности package.json

CSS
- ещё один трюк плавного перехода для height с 0 до auto (tldr, на гридах с 0fr до 1fr)
- много мелких, но приятных CSS-полезностей, которые так и ждут, чтобы их использовали
- hanging-punctuation — или как вынести висящие знаки препинания за пределы строки
- как сделать текст прозрачным внутри (с помощью небольшой -webkit-магии)
- как вытащить элемент из stacking context-а без задания ему transform, filter или opacity
- лок скролла с помощью overscroll-behavior

HTML
- пора ли уже переходить на формат изображений AVIF? Если сжимаете картинки сильно, и не нужна поддержка в Edge — да!
- бургер-менюшка без JS на Popover API
- пост для фронтендеров «кому за…» со сборником ностальгических хаков (даже есть упоминание спеки JSSS, которая однажды проиграла в браузерных войнах, и где мы сейчас?)
- красивая статья-размышление о многомерном пространстве в сайтах

#Лаборатория_веб_платформы

Обещанный видос по URL Pattern API и пример роутера с его использованием

Код тут https://codesandbox.io/p/sandbox/holy-feather-7m4ftd

Ютуб https://youtu.be/LHAjrvfej4U?si=xuW6UdFNMSkChgZP

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

Новости
- вышел Electron 28.0.0: добавлена поддержка ES-модулей и там всё оч интересно: главный процесс Electron-а запускается в ноде и соответственно использует имплементацию ESM ноды, а рендерится всё в хромиуме и там уже другая имплементация, Electron выбирает, как быть, в зависимости от контекста
- вышла библиотека StyleX от фб: из плюсов — типизация, генерация в билд-тайме, из минусов — непонятно зачем это нужно сейчас кому-то, кроме фб
- Remix запланировал реализацию React Server Components (видимо, вынужденно)
- вышел Vitest v1.0.0: кажется уже устаканилось настолько, чтобы внедрять (1.0.0 внушает доверие)
- вышел новый HTML5 Boilerplate (да, это не шутка! внимание, может вызвать ностальгические чувства)

Проекты
- как вам стейт-менеджер веб-приложений в виде SQL-бд (чудны дела твои, эволюция)? такое есть в SQLSync (а для выборки из стора можно пользовать SQL, yay)
- симпатичная либа компонентов на тейлвинде floatui (проект настолько свежий, что не успели ещё поправить ридми)
- tsdiagram сгенерит для вас на лету красивую диаграмму из хитросплетений типов
- just another либа для манипуляций с цветом culori
- тул для сбора перфоманс-метрик (в том числе Web Vitals) на пользовательских устройствах и отсыла их обратно через google-аналитику либо другие аналитические тулы (главное чтобы браузеры не блочили аналитические тулы)

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

JS
- как улучшить перфоманс-метрику INP: предсказуемые способы разгрузить основной поток setTimeout, requestAnimationFrame, requestIdleCallback, а также неведомый scheduler.yield()
- как плохой INP может уронить бизнес-метрики
- ещё одна попытка заинтересовать в веб-компонентах: в них можно бесплатно инкапсулировать логику, есть встроенные колбеки на добавление и удаление из DOM-а и изменение «пропсов»
- как заменить npm, yarn и nvm на pnpm (правда не очень понятно зачем)
- сборник рецептов для Puppeteer (от простого волшебства к сложным заклинаниям)
- как сделать скриншот фрагмента страницы с помощью Playwright
- old but gold: что такое и с чем едят JavaScript Import maps
- паттерны проектирования реакт-компонентов: as и asChild (is this a полиморфизм?)
- история того, как в JS появилось именно такое ООП, какое есть сейчас (читать с кофе, в кресле, укрывшись пледом)
- реактивный JS-фреймворк на коленке, откуда можно узнать: юзкейс для Proxy, незаслуженно неизвестное API queueMicrotask, ликбез по tagged template literals
- хитрая магия, чтобы делать «подтипы» в TS (после использования сжечь проект!)

CSS
- тулза для генерации CSS для подключения шрифтов
- дешёвый и сердитый способ сделать инпут для one-time-пароля (без JS!)

HTML
- примеры классного дизайна… URL (от stackoverflow, slack, github, npm и unpkg)

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

Финально в этом году обновился CSS Snapshot 2023! 🥁

В финальной редакции спека CSS View Transitions Module Level 1 перешла в FairlyStable-раздел. Это значит, что основная работа над спекой завершена и полученный результат довольно стабилен.

Поддержка View Transitions API пока что есть только в Хромиуме. Но вангую, что переход спеки в стабильный раздел должен дать сигнал в Мозиллу и Эпл, чтобы поддержка побыстрее появилась и в Firefox с Safari. Ждём в 2024. 🤞

Собираюсь по этому поводу записать видос с прикручиванием View Transitions API. Норм ли будет в таком же формате, как в прошлый раз? Поставьте 👾 или скиньте фидбек, плз.

#Пульс_веб_платформы 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
- использование респонсив <video> (аля <picture>) теперь кроссбраузерно (а также зачем-то респонсив <audio>)
- инспекция дерева доступности страницы теперь доступно в Хроме

Платформа
- разбор HTTP/2 по байтам: очень дотошно, душно и исчерпывающе
- исследование Яндекса о частоте использования тех или иных фич доступности на смартфонах: оказывается очень много людей используют системное увеличение шрифта и тёмную тему
- подготовка к мониторингу метрики INP: в целом, рекомендации те же — не допускать долгих блокирующих тасок всеми возможными способами

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

Короч, FF 121 вышел, селектор :has() доехал везде, теперь можно! 💫

<body>
  <div class="one"></div>
  <div class="two"></div>
</body>

.one {
  background-color: green;
}

.two {
  background-color: orange;
}

body:has(.two:hover) .one {
  background-color: red;
}

демо

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

Новости
- появился новый линтер oxlint: написан на Rust; можно не настраивать (convention over configuration); плагинов пока нет, но обещают, что можно будет писать их без использования JS или Rust; быстр, но в том числе потому что проверяемых правил мало
- вышел SvelteKit 2: Vite 5 под капотом, подготовка к будущему Svelte 5, shallow routing; tldr: Svetle продолжает прорастать в экосистему
- Vue 2 станет deprecated 31 декабря 2023
- вышел Firefox 121: главное поддержан :has()!
- вышла библиотека date-fns v3: теперь 100% типизирована, уменьшен размер бандла, функции экспортируются через named exports и кое-что ещё
- обновился Tailwind CSS v3.4: динамические viewport units, поддержка :has(), text-wrap: balance, субгриды и многое другое

Проекты
- waku — минималистичный React-фреймворк с поддержкой ServerComponents: включает клиент, сервер и роутер
- constate: библиотека для решения проблемы плодящихся контекстов в Реакте
- simple-web-server: простая декстопная аппка для настройки и запуска дев-сервера

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

JS
- список всех известных (и неизвестных) JS рантаймов и движков на все случаи жизни (даже чтобы выполнять JS в с/с++)
- если промис ушёл и не вернулся, он попал в чёрную дыру: чтобы это исправить нужно отказаться от асинхронных функций в угоду генераторов
- профилируя приложение для локализации автор пришёл к тому, что node --prof и инструмент speedscope — хорошая отправная точка для анализа перфоманса
- члены tc39 устали отвечать на одни и те же вопросы в ишью, и создали faq, в котором можно узнать, почему JSX не появится в ES, почему JSON никогда не поменяется, а также почему числа в JS такие странные
- в конкурсе на самый быстрый способ проброса состояния с сервера на клиент победил <noscript type="mime/invalid" id="myState">{"foo":"bar"}</noscript> window.__STATE__ = JSON.parse(window.myState.innerHTML)
- темы для холиваров в вашей команде, если вы работатете с Реактом: как писать экспорты, как называть файлы и пропсы, нужны ли стрелочные функции, а также тернарники vs early return
- TS-фичи «следующего» уровня: satisfies, infer, exhaustive type checking
- эволюция синхронного рекурсивного обхода папок в ноде достигла вершины — await fs.readdir(dir, { recursive: true })
- всё про Unicode для разработчиков: символы, их объединение, эскейп в JS, сравнение строк и регекспы

CSS
- смена стилей в зависимости от количества элементов с помощью element:has(> :nth-child(10))
- лок скролла из глубины DOM-а с помощью body:has(.lock-scroll) { overflow: hidden} <dialog class="lock-scroll">
- четыре способа создать анимированные градиентные рамки
- свойство animation-composition, позволяет начать анимацию с нуля либо с того значения свойства, которое уже задано на момент начала анимации (удивительно, но поддерживается везде!)

HTML
- в каких случаях подходит использование <link rel=preconnect>
- при использовании атрибута sizes="auto" у img нужно указывать также width и height
- создание шумной текстуры в SVG (секрет в применении SVG-фильтров)
- древнее знание: атрибут form у кнопки позволяет сабмитить форму, даже если кнопка снаружи неё

#Лаборатория_веб_платформы

А вот и демо с применением View Transitions API в SPA

Код тут https://codesandbox.io/p/sandbox/vigilant-bell-8tglkp

Ютуб https://youtu.be/nT1VC6_DDS8