FRONT | Фронтенд | JavaScript | CSS | TanStack Start 1.0 | Next.js 16.4 | Bun 1.4.3 | JPEG XL | React 19.3 | Cache Components | Remix 3 | Node 26 LTS | Temporal | Interop 2027 | Playwright 1.64

Лимит 512 КБ после gzip проверяется в сборке. Тяжелее — exit 1. Отчёт по модулям в dev-сборке показывает, что данные до сжатия весят 322 КБ, отрисовка 68. Таблицы тяжелее графики.

Файлов нет: ни картинки, ни звука. Планеты и названия генерируются из зерна, а шестьдесят с лишним звуков синтезируются из осцилляторов. Работает офлайн, CDN не нужен.

Chrome готовит правку в Resource Timing: размеры тела ответа кросс-доменных ресурсов отдадут только при загрузке через CORS. Сейчас достаточно Timing-Allow-Origin.

Тег без crossorigin, CDN без Access-Control-Allow-Origin — и размеры обнулятся. В интенте насчитали 15% таких ресурсов, у картинок 20%.

Флаг выключен по умолчанию, обсуждение не закрыто. План — Chrome 159, стабильно 8 декабря. transferSize потребует ещё и TAO.

Обёртка div внутри details больше не нужна: ::details-content — это сам слот с содержимым. Отступы, фон и рамку можно задать прямо на нём. Summary не трогается.

Раскрытие на чистом CSS: block-size от 0 до auto, content-visibility с hidden на visible, allow-discrete в придачу. Скрипт не нужен. Но auto поедет только с interpolate-size, а это Chromium: в Firefox и Safari прыгает.

Chrome/Edge 131, Firefox 143, Safari 18.4, Baseline newly.

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::details-content

TetraLogical выложили Accessible Components Library. Главное не восемь компонентов, а требования WCAG 2.2 в виде Gherkin-сценариев: Rule — сам критерий, теги @1.4.10 @aa @automatic называют уровень и автоматизацию.

447 сценариев из 461 гоняет Cucumber через Playwright в браузере: клики, фокус с клавиатуры, чтение состояний. Оставшиеся 14 уходят в JSON-отчёт и Markdown-чеклист для ручной проверки.

ISC. Не дизайн-система, а инструмент проверки.

https://github.com/TetraLogical/accessible-components-library

ProductCard перерисовалась 5 раз — DevTools причину не назовёт. Панель vue-why-render 0.8 называет прямо: проп badge: { text } → { text }, новая ссылка, значение то же.

Причину зашивают в цифру — budgets: maxRenders 2 за 1000 мс, getViolations() отдаёт reason. Действие в тесте обязательно: рендеры считаются за его время — expectRenders(Card).toBe(0, input.setValue.bind(input, 'mouse')). Починенный рендер не вернётся.

https://github.com/dadashi44/vue-why-render

Демо на двести строк и рабочий файлообменник различаются не объёмом кода. Разница начинается в чужих сетях.

Без relay часть соединений не встанет. Симметричный NAT выдаёт новый порт под каждый адрес, напрямую не пробить. Отсюда TURN и одноразовые креды по TURN REST — спека так и осталась черновиком.

Проверить у себя: ping шлёт сервер — из браузерного JS его не отправить; коды 1009 (RFC) и 1012 (IANA) не путать; лимит сообщения в ws — 100 МиБ.

https://www.rfc-editor.org/rfc/rfc6455.txt
https://www.iana.org/assignments/websocket

«Меню с поиском» в Base UI — диалог, а не комбобокс: у триггера aria-haspopup=dialog. Поиск — поле с ролью searchbox и aria-activedescendant, пункты — menuitem.

Home и End смотрят на состояние. Поле пустое и пункт подсвечен — клавиши ходят по списку. Иначе они двигают каретку: подсветка вернулась в поле или текст набран.

Base UI 1.9.0, preview.

Прайс или каталог не обязательно верстать в редакторе: HTML-страница печатается в PDF прямо из браузера, Ctrl+P.

В @media print нужны три вещи. @page с size: A4 и margin: 0 — без нулевого поля Chrome подгоняет макет, и 19 pt становятся 17,2. print-color-adjust: exact — иначе заливка шапки пропадает при снятой галочке «фон и графика». break-inside: avoid — высокая строка не рвётся пополам, а шапку таблицы браузер повторяет сам.

Схема уходит вектором, шрифты встроены. Цвет только RGB, CMYK вручную, Safari до 18.2 @page игнорирует.

https://habr.com/ru/articles/1095560/

Путь SVG стал данными: Firefox умеет с 137, Chrome — по плану в 159 (стабильно 8 декабря, сейчас за флагом SVGPathDataAPI).

const segs = path.getPathData();
segs[1].values[0] += 20;
path.setPathData(segs);

Массив словарей {type, values} вместо регулярок по d. normalize:true сводит дуги к M/L/C/Z, getPathSegmentAtLength отдаёт сегмент в нужной точке пути.

В Firefox копия сегмента через spread теряет поля: геттеры на прототипе. Читается только атрибут d: путь из CSS и анимации API не видит. Safari молчит.

https://developer.mozilla.org/en-US/docs/Web/API/SVGPathElement/getPathData

Иконка рядом с текстом висит выше или ниже строки: минусовый margin спасает до смены шрифта.

Оптический центр — не середина line-box, а половина от baseline до высоты заглавных: иконка раздувает строку.

Пустая инлайн-обёртка с position: relative и шириной руками, иконка внутри absolute высотой var(--icon-height), bottom: calc(var(--optical-center) - var(--icon-height) / 2).

Замеры на DejaVu Sans 56px. Как есть line-box 92,2px, центр иконки на 18,8px выше оптического. vertical-align: middle даёт 78px, центр на 5px ниже. С приёмом line-box 67,19px, отклонение нулевое.

cap с Chrome 118, lh с Chrome 109. Фолбэк: --optical-center: calc(0.72em / 2), в @supports (height: 1cap) — 1cap/2.

https://habr.com/ru/companies/avito/articles/1080464/