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

В JS есть Numeric Separators для более удобного визуального разделения цифр в числах. Разделитель — это символ нижнего подчёркивания _ (U+005F).

1_000_000_000             // миллиард
101_475_938.38            // сотни миллионов

const fee = 123_00;       // 12300
const fee = 12_300;       // тоже 12300

const amount = 12345_00;  // 1234500
const amount = 123_4500;  // тоже 1234500
const amount = 1_234_500; // тоже 1234500

Начинаться и заканчиваться подчёркиванием числа не могут, будут ошибки.

const a = 00_; // SyntaxError: No identifiers allowed directly after numeric literal

const b = _00; // ReferenceError: Can't find variable: _00

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

В Chrome начали пилить реализацию нативного скоупинга в CSS 🎉

Это чтобы можно было делать, например, вот так:

@scope (.dark-theme) { a { color: plum; } }

<div class="dark-theme">
  <a href="#">plum</a>
  <div class="light-theme">
    <a href="#">purple</a>
  </div>
</div>

На самом деле спека, как это обычно бывает в CSS, довольно много всего предусматривает «с запасом», а не только показанное в примере.

Фича важная для CSS-in-JS и подобных «инкапсулирующих» решений, поэтому если фичу реализуют в этом году в Chrome, вангую, что остальные вендоры тоже быстро подтянутся.

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

Look Ma, это я в 2025 пишу фича-флаги прямо в CSS!

  /* обычные стили */
  /* ... */

  @container style(--wow-such-a-feature: true) {
    /* стили за фича-флагом */
    /* ... */
  }

  @container style(--wow-such-an-another-feature: true) {
    /* стили за фича-флагом */
    /* ... */
  }

реф

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

В конце января – начале февраля 2023 будет проходить митинг TC39, на котором, среди прочего, stage 4 будет брать пропоузал с недеструктивными методами изменения массивов:

Array.prototype.toSorted(compareFn)
Array.prototype.toSpliced(start, deleteCount, ...items)
Array.prototype.with(index, value)

Суть методов toReversed, toSorted и toSpliced сходу понятна: это просто те же обычные reverse, sort и splice, которые возвращают новый массив вместо изменения старого:

> [1, 10, 3]

[3, 10, 1].toSorted()
> [1, 10, 3]

[3, 10, 1].toSpliced(1, 2, 5, 6)
> [3, 5, 6]

А вот метод with уже сходу не очень понятен. Он про точечную замену: меняет один элемент массива на указанном индексе на другой:

> [3, 10, 0]

Интересно ещё то, что эти методы уже доступны в бетке Chrome 110 без флага, то есть вероятно после встречи TC39, когда пропоузал выдет на stage 4, скоро выкатится и стабильный Chrome.

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

В именованных CSS-цветах red — это алиас для #ff0000, а blue — это #0000ff.
Но green — это не #00ff00, что кажется логичным. На самом деле green — это #008800. А за цвет #00ff00 отвечает алиас lime.

реф

Interop 2023

Дождались. В предыдущем выпуске подкаста «Веб-стандарты» мы строили предположения, за что же возьмутся браузеры в этом году, чтобы сделать реализации различных фичей предсказуемыми и соответствующими тестам веб-платформы. И вот анонсы появились одновременно среди большого количества браузерных компаний.

Итак, направления, на которые в этом году будет сделан упор.

В CSS:
- Свойство border-image.
- Цветовые пространства и функции в CSS — по сути осталось дотянуть display-p3, lab, lch, oklab, oklch, xyz в Firefox и функцию color-mix().
- Container Queries.
- Containment в CSS — свойства contain и content-visibility.
- Псевдоклассы в CSS.
- Кастомные свойства.
- Флексбоксы.
- Шрифты.
- Гриды.
- Родительский селектор :has().
- Маскирование в CSS.
- Математические функции в CSS.
- Медиавыражения.
- Набор свойств offset для анимаций по кастомному пути: offset-path, offset-distance, offset-position и другие.

В HTML:
- Формы.
- Атрибут inert.

В браузерных API:
- Модули в веб-воркерах.
- Offscreen Canvas — канвас в отдельном воркере.
- Pointer и Mouse Events.
- Интерфейс URL.
- Веб-кодеки.
- Веб-компоненты.

Список большой, но по многим направлениям в браузерах уже успешно проходит большая часть тестов. Напоминаю, основная задача проекта Interop — убрать различия в браузерном поведении, чтобы нам, разработчикам, было проще и спокойнее использовать фичи без костылей и подпорок под особенности какого-нибудь конкретного случая в конкретном браузере.

Следить за прогрессом лучше всего прямо на сайте тестов веб-платформы: https://wpt.fyi/interop-2023

Анонсы от разработчиков браузеров:
- https://web.dev/interop-2023/
- https://blogs.windows.com/msedgedev/2023/02/01/microsoft-edge-and-interop-2023/
- https://www.igalia.com/news/2023/interop2023.html
- https://webkit.org/blog/13706/interop-2023/
- https://bocoup.com/blog/interop-2023
- https://hacks.mozilla.org/2023/02/announcing-interop-2023/

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

Фреймворки фремворками, а махина 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. 🤞