Павел Мажуга | Frontend Developer

Flowmap Live: https://pavelmazhuga.com/lab/flowmap/ Source code: https://github.com/pavel-mazhuga/portfolio/tree/main/frontend/src/features/experiments/flowmap

https://specification.website/ Спецификация технических деталей, которые должны быть реализованы на "хорошем сайте". Здесь есть как база, как и разделы про производительность, доступность, безопасность, приватность, устойчивость и даже про доступность для AI агентов. Тут даже есть MCP сервер: можно просто дать агенту ссылку на сайт, и он проведет аудит и предложит улучшения. Прикольно.

😧😧😧

Я обновил сайт-портфолио Прошлый сайт был собран буквально «на коленке», теперь дошли руки сделать по уму. Я хотел разрушить миф о том, что WebGL и хорошая оценка в PageSpeed/Lighthouse несовместимы: сайт выдает почти соточку как на мобилке, так и на десктопе (есть нюанс: PageSpeed Insights получает таймаут от моего сайта, не знаю в чем причина, может вы подскажете?). Технологии: - Astro - Three.js (TSL) - Web worker - View Transition API - GSAP Интересные моменты: - Первый раз использовал View Transition API на полную катушку. Понравилось! Все очень плавно и отзывчиво. - Абсолютно весь WebGL опыт в веб-воркере, включая видео. Ранее видео было единственным, что не давало запускаться в воркере, потому что была привязка к DOM у VideoTexture. Но начиная с three.js 0.173 появился VideoFrameTexture, который работает без DOM. Фреймы летят через postMessage в воркер. - Адаптивные видео. Вы знали что атрибут media работает и для <video>? Шок :) Жду когда еще релизнут HTML-in-Canvas API, тогда доработаю еще, хочется с текстами что-то поинтереснее сделать Live: https://pavelmazhuga.com/ Source code: https://github.com/pavel-mazhuga/portfolio

https://ui.shadcnlanding.com/ Примеры переключения темы сайта на View Transition API

ActiveFrame Бывает задача привязать к скроллу прогресс видео для вовлечения пользователя в какой-то сторителлинг. Скроллишь вниз - видео покадрово проигрывается вперед, скроллишь вверх - проигрывается реверсивно. До сих пор такая фича делалась двумя способами (я знаю лишь два): 1) через секвенцию изображений: нарезается миллиард файлов, 1 файл = 1 кадр, и по прогрессу скролла в канвас рисуется нужный кадр. В чем недостаток: очень много кадров, сеть забита кучей запросов, каждый рендер в канвас вызывает декодирование изображения (дорогая операция каждый фрейм). Пример на Codepen 2) через видео: видео специально подготавливается через ffmpeg, затем currentTime подгоняется под прогресс скролла. Пример на Codepen В чем недостаток: большой вес видеофайла. Нельзя использовать в веб-воркере (привязка к DOM API в виде элемента <video>). Неидеальная синхронизация. Теперь есть третий способ. Luigi De Rosa, Interactive Director из Active Theory, заопенсорсил ActiveFrame - JS библиотеку и пайплайн для генерации видео в специальном формате .af для декодирования в браузере через WebCodecs API без использования тега <video>. Это очень круто. Наконец-то нормальный способ скраббить* видео по скроллу! Преимущества: - Нативен в WebGL/WebGPU. ActiveFrame декодирует видео через WebCodecs API и отдаёт готовый VideoFrame, который WebGL/WebGPU и канава принимают напрямую, без лишних копий данных. - (!) Работает в веб-воркере. Нет привязки к DOM, <video> не используется. - Hardware accelerated. Декодирование идёт через WebCodecs, который использует аппаратный декодер видеокарты (H.264/H.265), то есть это намного быстрее и меньше нагрузка на CPU. Стандартный <video> тоже это умеет, но у него нет доступа к отдельным кадрам. - Оптимизирован специально под скраббинг*. Обычный <video> при этом тормозит: начинает буферизовать, теряет кадры. ActiveFrame упакован так, чтобы такие операции были отзывчивыми. - Идеальная синхронизация нескольких видео. Синхронизировать несколько <video> элементов невозможно: у каждого своя буферизация, небольшие рассинхроны неизбежны. Я как-то пытался сделать анимированный переход между страницами, где надо было на новой странице восстановить кадр проигрываемого видео с прошлой страницы кадр в кадр, ничего не получилось. ActiveFrame позволяет напрямую управлять кадрами через setFrame(). Я уже попробовал на реальном проекте, работает прекрасно. Единственный нюанс: в Firefox декодинг хуже работает, надо генерировать видео с всеми ключевыми кадрами (для chrome/safari достаточно чтобы каждый пятый кадр был ключевым), чтобы норм скроллилось, но вес файла раздувается в 4 раза. Скроллинг - лишь одно из применений. Рандомный доступ к любому кадру открывает множество возможностей, на что хватит фантазии. Чуть позже сделаю свою демку, чтобы показать. Демо: https://activetheory.github.io/activeframe/ Ссылка на Github: https://github.com/activetheory/activeframe Пост Luigi в X: https://x.com/luruke/status/2037511335257223626?s=46&t=5F8sSxrCn_V01Wdack1foQ *Scrubbing - перебор кадров

Это второй (c) Еще один PR в трешку:) снова связан с использованием в воркере - TextureLoader использует window, что работает только в основном потоке. Использование ImageBitmapLoader решает проблему. https://github.com/mrdoob/three.js/pull/33279

Basewatch Инструмент для отслеживания изменений в web-platform и браузерной поддержке. Помогает понимать, какие фичи стали baseline и когда их можно безопасно использовать в продакшене. Полезен для принятия решений о внедрении новых API без лишнего риска. Используемые источники это MDN Browser Compat Data, CanIUse, Web Platform Baseline, Chrome Status. Также можно подписаться на отслеживание конкретных фич, когда поддержка достигнет определенного процента.

Борьба с «лесенкой» у градиентов в шейдере Градиенты на темных фонах часто превращаются в «лесенку» (banding). Так происходит из-за нехватки точности 8-битного цвета для отображения очень плавных переходов. Это видно на первом скрине (я надеюсь что видно, скрин плохо передает, выкрутите яркость на максимум и увидите). Это можно решить с помощью дизеринга (dithering): мы подмешиваем к цвету небольшой нойз, который визуально размывает границы «лесенки». Дизеринг можно реализовать вот так (TSL): const dither = (node) => { const noise = viewportUV .mul(viewportSize) .dot(vec2(12.9898, 78.233)) .sin() .mul(43758.5453) .fract() .sub(0.5) .div(255); return node.add(noise); }; Вычисляем псевдорандомный шум на основе координат пикселя и прибавляем его к итоговому цвету перед выводом. Деление на 255 гарантирует, что шум не зернит, а мягко перемешивает соседние оттенки. Результат на втором скрине. Подробнее можно почитать тут: https://alex-charlton.com/posts/Dithering_on_the_GPU/ Практическая статья от Maxime Heckel: https://blog.maximeheckel.com/posts/the-art-of-dithering-and-retro-shading-web/

Metaballs (raymarching, TSL) Live: https://pavelmazhuga.com/lab/metaballs Source code: https://github.com/pavel-mazhuga/portfolio/tree/main/src/app/lab/metaballs

Паттерны во фронтенде https://www.patterns.dev/vanilla/ Ресурс о дизайн-паттернах, паттернах рендеринга и производительности для построения веб-приложений на чистом JS или фреймворках (react / vue). Прикольно, что некоторые разделы содержат сэндбоксы с кодом и много графического контента

Web Haptics Web Haptics - это технология, позволяющая веб-сайтам использовать тактильную отдачу (вибрацию) мобильных устройств для улучшения UX. Она имитирует физический отклик некоторых элементов. Вы могли это замечать, например, в инсте, когда в директе оверскроллите вниз - так можно включить режим исчезающих сообщений. Для вызова используется Vibration API (navigator.vibrate): позволяет задавать одиночные импульсы или сложные паттерны вибрации (например, чередование вибрации и пауз). Хорошо работает на Android, а вот на iOS Vibration API блокируется системой. В твиттере нашел либу https://haptics.lochie.me/, которая использует забавный костыль: В мобильном iOS поддерживает хаптики только чекбокс. Поэтому либа создает скрытый чекбокс по триггеру, нажимает его и сразу удаляет. Я бы применил где-нибудь на проекте, прикольно

Процедурный генератор деревьев для Three.js https://www.eztree.dev/ Очень много параметров! Можно экспортировать как glb и как png.

Бруно заопенсорсил портфолио: https://github.com/brunosimon/folio-2025/. Тут много интересного. Например, как реализована вода, особенно блюр под поверхностью воды. Или то, что используется пререндер всех используемых нойзов в текстуры, чтобы в шейдере их просто семплить, а не пересчитывать каждый кадр. Как работают молнии. Как реализованы следы от колес и как происходит деформация террейна. Про следы хочу позже подробнее рассказать, когда сам разберусь. Но его кодстайл меня убивает)) https://bruno-simon.com/

Чуваки из Utsubo написали статью, как в 2026 году делать производительные Three.js (WebGPU) экспириенсы https://www.utsubo.com/blog/threejs-best-practices-100-tips Посмотрите их мощный сайт, если еще не видели: https://www.utsubo.com/

Chillbase - Website of the day https://www.cssdesignawards.com/sites/chillbase/48418/

https://www.youtube.com/watch?v=EQ5m0Jhz-qs первый в СНГ доклад про TSL уже в сети 🙂 приятного просмотра!