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

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

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

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

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

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

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

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

В 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 нашёл именно у вас. Этот список удобно брать, как отправную точку для ручной проверки.

#фронтенд

Ошибки в 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.

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

Как читать ввод геймпада в JavaScript и находить дрейф стиков

Gamepad API прост, но первая проверка может объявить неисправный контроллер здоровым. Chromium держит значение оси на нуле, пока хотя бы раз не увидит её около центра: по модулю меньше 0,1. Поэтому сильный дрейф может оставаться скрытым сколько угодно.

Есть и вторая ловушка: navigator.getGamepads() возвращает снимок состояния. Его нужно вызывать заново в каждом кадре requestAnimationFrame, а пустые ячейки массива пропускать.

Я сохранил практический разбор freeCodeCamp как чеклист для браузерного тестера. После подключения попросите пользователя провести стики через центр, дождитесь ненулевого значения каждой оси и только затем ищите дрейф. Без контроллера опрашивайте API редко, после подключения переходите к каждому кадру.

Как измерять отрисовку компонентов через Container Timing

Метрика LCP отмечает крупнейший элемент в области просмотра. Но карточка товара состоит из изображения, цены, наличия и кнопки, поэтому одна картинка не описывает её отрисовку.

Container Timing помечает атрибутом containertiming область DOM. Через PerformanceObserver браузер сообщает, когда текст или изображение впервые занимают ещё не учтённую её часть. Так видны первое содержимое и этапы отрисовки.

API не сообщает, что компонент готов: позже могут появиться новые данные. Границу выбирает приложение, например последнюю запись перед первым действием пользователя. В разборе Гарри Робертса на CSS Wizardry есть код настройки, варианты границ и ограничения, а также подключение к origin trial Chrome.

Как сделать потоковый интерфейс стабильным

Чат с ИИ, лента логов и расшифровка речи меняются, пока пользователь их читает. Безусловная автопрокрутка выдёргивает его к новому тексту, а пересборка дерева элементов на каждый символ создаёт обновления, которые браузер не успеет показать.

Разбор Smashing Magazine предлагает три правки. Автопрокрутку оставляют, только пока до низа контейнера не больше 60 пикселей. Новый текст дописывают в существующий текстовый узел, а не пересоздают элементы через innerHTML. Символы собирают в буфер, а requestAnimationFrame переносит их в дерево элементов не чаще раза за кадр.

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