FRONT | Фронтенд | JavaScript | CSS | TanStack Start 1.0 | Vite 8 | Next.js 16.4 | TypeScript в Rust | React 19.3 | Bun 1.4.4 | Playwright 1.64 | SvelteKit 3.0 | Astro | WebMCP | Deno | Preact 11

Лишние колонки в многоколоночной вёрстке больше не уезжают за правый край. column-wrap: wrap переносит их вниз, новым рядом.

Высоту ряда задаёт column-height, height контейнера тоже подойдёт.

column-count: 3; column-height: 130px; column-wrap: wrap;

Пока высота ряда не ограничена, переносить нечего: wrap ведёт себя как nowrap.

Chrome 145+, с 10 февраля. В Firefox и Safari пока нет, так что @supports не помешает.

100 000 строк обновляются по WebSocket без единого ре-рендера списка. Список лежит в JS-Map вне React, компонент через useSyncExternalStore читает версию своей строки: патч на id 42 дёргает только строку 42.

Бинарные фреймы вместо JSON: буфер уходит в воркер без копии. Декодирует в отдельном потоке и отдаёт в главный пачками, не чаще раза в 16 мс. В DOM только видимое — 30–50 узлов.

60 FPS — цифра автора разбора, а не наш замер.

habr.com/ru/articles/1098484/

Ряд из пяти точек собирается из одного div и тени без размытия. box-shadow с blur 0 копирует бокс: сдвинул копию по X, и вот вторая точка, сдвинул ещё — третья. Цвет и spread у каждой тени свои, поэтому один ::before рисует и точки 16 px с шагом 32, и цветную шкалу.

Живут копии только в отрисовке. Места в раскладке не занимают, клик не ловят, скринридеру не видны. Форму повторяют ровно, менять можно только размер через spread: столбики разной высоты из одной тени не собрать.

Chrome 10, Firefox 4, Safari 5.1; несколько теней в одном свойстве — с Chrome 1, Firefox 3.5 и Safari 3.

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/box-shadow

Крутишь SVG-иконку через rotate, а она уезжает по орбите вместо того, чтобы крутиться на месте. Виноват transform-origin: center — у SVG он считается от reference box, а тот по умолчанию view-box, весь холст.

Одна строка меняет точку отсчёта: transform-box: fill-box. С ним center — центр самой фигуры, и координаты пересчитывать не надо.

transform-box: fill-box;
transform-origin: center;

Chrome 64, Firefox 55, Safari 11. Baseline widely available с 16 октября 2026.

Дом и деревья из одних линий, stroke без заливки. Клик, и снизу вверх поднимается краска: край идёт волной, как на мокрой бумаге.

pathLength="1" вместо getTotalLength: длина сжата до единицы, всем линиям подходит один stroke-dasharray, а очередь задаёт animation-delay.

Край рвут два фильтра: feTurbulence рисует шум, feDisplacementMap тянет по нему край, красный канал по X, зелёный по Y. Шум стоит, заливка едет сквозь него. Наивно не выйдет: контуры нужны линиями, SVG — через fetch и innerHTML.

Виджет чата в форме логина уводит фокус к себе — пароль печатается в чужое поле. С Chrome 158 (стабильно 17 ноября) это выключается декларативно: Permissions-Policy: focus-without-user-activation=(self), точечно — атрибут allow на фрейме.

По умолчанию политика разрешает фокус всем: 158 включает механизм (сейчас в Dev), запрет ставит владелец страницы. Режутся focus(), autofocus и автопереход в открывшийся dialog, пока в кадре не было действия пользователя.

Диалоги открываются, Tab и клики работают. У Firefox позиции нет, Safari за.

https://chromestatus.com/feature/5179186249465856

align-content: center центрирует содержимое в обычном блоке: обёртка с display: flex и align-items: center больше не нужна, минус один div.

Высота обязательна, без свободного места центрировать нечего. Из значений тут работают только start, end и center, а space-between ведёт себя как start.

Коробка 330 px, три абзаца: без свойства внизу пустует 148 px, с ним по 70.

Chrome и Edge 123, Safari 17.4, Firefox 125 умеют с весны 2024, Baseline widely available — с 16 октября 2026.

https://webstatus.dev/features/align-content-block

Игра 1997 года работает в браузере. Код на TypeScript и Three.js, без эмулятора и DOSBox: движок читает нетронутые бинарные файлы shareware-демо и собирает Liberty City на WebGL.

Есть физика машин с коллизиями по четырём углам, интерпретатор MISSION.INI с таксофонными миссиями, трафик и пешеходы. Полиции нет, части звука тоже — проект не закончен.

Большую часть кода автор попросил написать Gemini по открытым реимплементациям и доку mtd.doc. Файлы демо в проект не входят: их грузят в кэш браузера.

https://gtajs.wtf/

Brotli-декодер в Node пишет за границу буфера — 9.2 по NVD, вплоть до RCE. Вход не только zlib.brotliDecompress, но и br-ответ в fetch по HTTPS.

Два обхода проверки имени в TLS: полноширинные цифры как IP (26.x, 24.x) и «слабая» резолвка в адрес. Нужен сертификат атакующего — сверку имени он не пройдёт.

26.12.1 Current, 24.22.1 и 22.23.4 LTS, всего десять CVE.

parseFloat('1 250,50') отдаёт 1. Ни NaN, ни исключения: парсер дочитал до первого пробела и выбросил остаток. Единица уходит дальше как настоящая сумма.

Такую строку производит наш же код. Intl.NumberFormat('ru-RU') разделяет разряды неразрывным пробелом, и его вывод, вернувшись в parseFloat, даёт ту же единицу.

Лечится не угадыванием смысла, а нормализацией на входе. Снять пробелы всех видов, запятую сменить на точку. Если после суммы ещё цифры, как в «1 руб. 50 коп.», — остановиться и попросить ввести однозначно. Копейки считать целыми.