FRONT | Фронтенд | JavaScript | CSS | TypeScript в Rust | JPEG XL | Next.js 16.4 | Chrome 156 | TanStack Start 1.0 | Remix 3 | Preact 11 | Nuxt 4.6 | Bootstrap 6 | Interop 2027 | Anchor positioning

Лимит 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 с…