Физика, стеклянные деформации и процедурный звук в одном эксперименте на WebGPU

Франк Райтбергер с появлением WebGPURenderer и TSL сознательно перевёл свои эксперименты на новый стек, чтобы публиковать их уже на современной технологии. «Садовая аномалия» один из них.

В сцене сходятся три вещи: физика, деформации стекла и процедурно генерируемый звук. Последнее в браузерных демках встречается редко, и именно связка звука с симуляцией отличает эксперимент от обычного шейдерного этюда.

Компактный образец того, на что уже сегодня годится WebGPU в связке с TSL, без разрастания в полноценный проект.

Разработчик натянул настоящий рельеф Альп на сайт в Webflow и собрал всё за неделю

Вопрос, с которого начался проект: может ли сайт на Webflow нести реальные данные высот, натянутые сеткой горизонталей и отрисованные живьём в Three.js, а не видеопетлю и не запечённый спрайтшит.

Может. Вышли три сцены по настоящим маршрутам: Тре-Чиме в грозу, Монблан на переходе синего часа в розовый и Аннапурна ночью со снегом. Геометрия везде честная. Свой трек автор записал в Strava, выгрузил GPX, почистил типичные выбросы GPS и натянул на реальный склон SRTM, а наружу уезжает только нормализованная версия без точных координат.

Сайт при этом остался обычным редактируемым проектом Webflow, и весь он собран примерно за неделю через Webflow MCP.

Разбор сделан из журнала сборки, который автор вёл с первого дня, поэтому в нём есть и неверные повороты, а не только причёсанный итог.

Он сделал всё, чтобы никто не лез в его код

Типичный Программист снова откладывает отпуск. В этот раз аргумент новый, но узнаваемый: релиз вот-вот стабилизируется. Спойлер: не стабилизируется.

В новой мини-игре вам придётся взять дело в свои руки: найти его билет, собрать чемодан и проследить, чтобы туда попали не только рабочий ноутбук и запасные зарядки. По пути можно поймать промокоды от партнёров!

Поехали → https://tprg.ru/SEVh

Один блок с живыми данными больше не заставит делать динамической всю страницу

Ситуация знакомая: сайт статический, а в футере нужны свежие цифры. Дальше выбор так себе — либо пометить маршрут динамическим и потерять скорость отдачи, либо писать загрузчик на весь маршрут ради одного компонента, теряя по дороге типы.

В SvelteKit 3 RC для этого есть remote functions: серверную функцию-запрос компонент импортирует и вызывает прямо у себя, а компилятор подставляет клиентскую обёртку, которая сама делает fetch. Отдельный роут и обвязка не нужны, типы с сервера доезжают до компонента.

Фича экспериментальная ещё с 2.27, третья версия пока в статусе кандидата: равноправными с load-функциями remote functions станут после того, как дочистят оставшиеся баги. Я бы попробовал их на одном компоненте со свежими данными, вроде футера, а load-функции пока не выкидывал.

#фронтенд

Воркер тормозит интерфейс мимо ваших метрик, но Chrome 153 его показывает

Вы вынесли в dedicated Worker декодирование данных, фильтрацию большого каталога или клиентскую модель. INP, метрика отклика на клики и ввод, при этом приличный, а продукт кажется медленным: ответ, которого ждёт интерфейс, стоит в очереди воркера, и увидеть это было нечем.

Chrome 153 распространяет на такие воркеры Long Animation Frames, механизм учёта длинных блокирующих задач: задача, надолго занявшая event loop воркера, отдаёт запись long-animation-frame с атрибуцией по скриптам, и её видно изнутри через PerformanceObserver.

Пока это только dedicated Worker, и версия дошла до части пользователей Windows и Mac, полный релиз сегодня, 8 сентября.

#перформанс

Bun на 2000 параллельных сборках стал есть 609 МБ вместо 6,7 ГБ

Если вы упирались в память, когда Bun собирает много всего разом, в версии 1.4.0 потолок сдвинулся: на том же бенчмарке расход упал с 6,7 ГБ до 609 МБ. Заодно порт закрыл 128 старых багов и примерно на 20% ужал бинарник на Linux и Windows.

Ядро рантайма переписали с Zig на Rust, чтобы обращения к освобождённой памяти ловил компилятор. Переписывала не команда: 64 агента в параллельных git-worktree за 11 дней перевели 535 496 строк Zig и разгребли 16 000 ошибок компиляции. API обошёлся примерно в $165 000, а Turborepo с Go на Rust переводили 3–5 инженеров 14 месяцев.

Цифры порта собраны на dev.to.

#javascript #ии

Длинная таблица вешает вкладку, и чинится это двумя неочевидными приёмами

Админка отдаёт 50 тысяч строк, вы выводите их в разметку как есть, и скролл захлёбывается. По замерам из разбора такой список стоит браузеру около 850 МБ узлов DOM против 1,2 МБ у той же таблицы с виртуализацией.

Живыми остаются только 15–20 видимых строк, остальное лежит массивом в JS. При скролле вы не создаёте и не удаляете узлы, а переиспользуете те же: меняете текст и сдвигаете.

Дальше два шага. Первый: невидимый div высотой «число строк × высота строки», иначе скроллбар считает список коротким. Второй: строке ставится top: index × ITEM_HEIGHT, иначе двадцатитысячная строка нарисуется у верхней кромки.

Забрал бы этот разбор на случай, когда в списке заводится бесконечная прокрутка: весь путь показан на чистом JS. Ограничение видно из формул: они держатся на фиксированной высоте строки.

#фронтенд

Маркдаун-версия страницы для ИИ-агентов может утечь в браузер живого пользователя

По вашим страницам уже ходят ИИ-агенты, и каждая обходится им в токены. Медиана по 300 сайтам: 2592 токена на страницу по извлечённому тексту, без скриптов и стилей. Около половины из них не тело статьи: пятая часть это навигация, шапка и подвал, остальное повторы.

Семь сайтов из 300 отдают машинному читателю маркдаун-версию, и та же страница стоит уже 962 токена. Но у шести из семи нет заголовка Vary: Accept: кэш перед сайтом не знает, что ответ зависит от запрошенного формата, и может отдать маркдаун браузеру или HTML агенту. Ломается тихо, в логах не видно.

Досталось и документации Cloudflare про эту самую фичу: там обе проблемы сразу. Я забрал этот замер себе как чеклист: раздаёте контент по Accept — сверьте Vary и проверьте, не выпал ли из маркдаун-версии текст страницы. У трёх сайтов из семи выпал.

Ваш блок отцентрован идеально, но у читателя с боковой панелью он съедет вправо

Привычный body { display: grid; place-items: center } центрирует колонку внутри вебвью. А вебвью это не окно: боковая панель Arc или Vivaldi забирает ширину слева, и колонка встаёт заметно правее реального центра экрана.

Автор блога seg6.space считал поправку как window.outerWidth - window.innerWidth: разница даёт ширину интерфейса браузера, а блок сдвигается на её половину через translate. Схема сломалась на открытых справа DevTools: сумма та же, а как она поделена между левой и правой панелью, из двух чисел не вытащить. Недостающую координату он добыл из событий указателя.

#css #фронтенд

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

Проверку доступности обычно вешают в CI и смотрят на цвет прогона: зелёный значит порядок. WebAIM восьмой год подряд гоняет по этой же логике главные страницы миллиона сайтов из рейтинга Tranco и выложил срез за февраль 2026 года: движок WAVE смотрит отрендеренный DOM, уже после скриптов и стилей, на провалы по WCAG 2.2 уровней A и AA.

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

Попробуйте с формы Site Lookup на странице отчёта: вбиваете свой домен и видите, что WAVE нашёл именно у вас. Этот список удобно брать, как отправную точку для ручной проверки.

#фронтенд

От аськи до биткоина, от Nokia 3310 до QR-кодов — пройди анкету и узнай, какой ты носитель информации!

Ошибки в WebGPU-пайплайне теперь всплывают в редакторе, ещё до первого кадра

Рендер-пайплайн на WebGPU молчит до первого кадра: формат цели рендеринга не совпал с тем, что ждёт фрагментный шейдер, и на канвасе пусто, без единого сообщения.

Уго Даниэл 2,5 года делает pngine: обвязка WebGPU описывается S-выражениями, которые один в один повторяют спецификацию, а не собирается вызовами JS. Шейдеры и инициализация cpu/wasm лежат там же, и это не только про браузер: формат играется поверх rust wgpu, есть плееры под Android и iOS.

Конфигурацию pngine проверяет рефлексией WGSL и правилами спецификации, без живого WebGPU-контекста. Ошибки и предупреждения приходят во время набора текста, потому что у формата есть LSP.

Ещё демку можно выгрузить в один .png: картинка хранит байткод и сама ничего не запускает, но открывается крошечным плеером. Прототип рендера можно отдать коллеге картинкой.

Пружинящую деформацию модели в Three.js собирают на костях, а не на симуляции мягкого тела

Гнущийся объект в вебе обычно делают либо запечённой анимацией, которая не отвечает на ввод, либо симуляцией мягкого тела, которая съедает кадр.

В демке Codrops Эйфелева башня работает катапультой: тянешь её мышью, она гнётся и копит энергию, отпускаешь — и шар летит через Париж. Гибкость держит библиотека Wiggle: в модель встраивают цепочку костей, каждая догоняет родительскую по пружинному закону, поэтому объект качается в ответ на действие игрока, а не проигрывает готовый клип.

Париж вокруг собран не руками: город стримится из Cesium ion, это фотореалистичные 3D-тайлы Google. На стороне Three.js остаются анимация, столкновения и приземление.

Приём переносится на любую модель с костями: антенна, хвост, ветка. В статье остались расчёт траектории и стыковка геоданных с физикой.

Chrome прощает битую разметку, а скринридер на ней спотыкается, и проверить это можно за минуту

Страница открывается во всех браузерах, и на этом проверка разметки обычно заканчивается. Тео Дюкрё прогнал через открытые валидаторы 2656 живых главных страниц из топ-5000 доменов Tranco: полностью валидный HTML оказался у 12,8% сайтов, а без единого предупреждения свёрстаны 2,6%.

Сильнее всего это бьёт по доступности: 41,6% страниц не размечают регионы ARIA-метками, 20,4% сайтов оставляют картинки без alt. Chrome достроит структуру сам, а скринридер читает именно эту разметку и объявляет «iframe» там, где вы имели в виду навигацию.

Откройте вкладку Accessibility в devtools на своём главном шаблоне: если дерево регионов пустое, начните с header, nav и main, а картинки без alt поймает html-validate в CI. Цифры и методика в разборе DevClass.

#html

Tailwind меняют на StyleX ради типизированных токенов, а спотыкаются на сборке

Вы прикидываете, стоит ли тащить StyleX в проект, и упираетесь в спор на уровне вкусов: типизация против скорости вёрстки. В LogRocket Blog этот спор закрыли практикой — собрали 20 компонентов на Tailwind, переписали на StyleX и замерили строки кода, вес CSS-бандла и время сборки.

Но полезнее цифр то, что вылезло по дороге:
• barrel-экспорты, когда всё отдаётся наружу через один index.ts, ломают разрешение токенов;
• @keyframes прямо внутри stylex.create() туда не принимаются;
• динамические ключи стилей приходится расписывать явной таблицей соответствий;
• falsy-значения в массиве sx не работают, так что привычное условие через && придётся переписать.

Победителя автор не назначает: в разборе есть и настройки Webpack с Babel, и список мест, где Tailwind остаётся быстрее.

#css

Neovim: терминальный редактор, который настраивается на Lua

Neovim — форк Vim для тех, кто правит код прямо в терминале и не хочет ставить туда полноценную IDE. От Vim отличается вменяемыми настройками по умолчанию и встроенной поддержкой Language Server Protocol: редактор сам получает от языкового сервера автодополнение, переход к определению и подсветку ошибок, и собирать это из плагинов не нужно.

Конфиг пишется на Lua и разбивается на модули, поэтому сложная настройка не превращается в один нечитаемый файл. Внутри есть свой эмулятор терминала, а большинство плагинов Vim продолжают работать.

Ставится на Linux, macOS (brew install neovim) и Windows. Пригодится, если вы часто редактируете файлы по ssh: подсветка ошибок и автодополнение будут и там, где графического редактора нет.

Установку и сборку первого конфига по шагам разбирают в The New Stack.

#инструменты