Реалистичный свет для 2D-изображений в Three.js

Связка depth maps, TSL и WebGPU позволяет превратить плоскую картинку в поверхность, на которую можно динамически накладывать свет, рельеф и тени. За счёт карты глубины изображение начинает вести себя как псевдо-3D сцена, а не как обычный спрайт. Такой приём даёт более живую визуализацию без полноценного 3D-моделинга и может пригодиться для hero-блоков, промо и интерактивных эффектов в интерфейсе.

Демо | Github

https://tympanus.net/codrops/2026/08/19/relighting-images-with-depth-maps-and-three-js/

Дашборды, которые ведут к решению

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

https://smashingmagazine.com/2026/08/rethinking-data-visualisation-ux-approach-dashboards/

Как переопределять токены в design system через @layer

Подход для крупных design system: как удобно переопределять дефолты компонентов и токены из билда, не превращая CSS в свалку приоритетов. Если у вас растёт библиотека компонентов и тема должна накатываться сверху, @layer и :defined дают более управляемую схему переопределений.

https://blog.master.dev/design-systems-horizontal-layer/

React Fiber: как React обновляет UI без фризов

React Fiber — это новый движок согласования в React, который делает рендеринг прерываемым, приоритетным и более предсказуемым под нагрузкой. Вместо того чтобы обрабатывать всё дерево одним непрерывным проходом, React может разбивать работу на части, приостанавливать её, возобновлять и выбрасывать устаревшие вычисления. На практике это снижает риск пропуска кадров и помогает важным обновлениям проходить быстрее, особенно в больших интерфейсах.

https://habr.com/ru/companies/timeweb/articles/1068626/

Как измерять скорость рантаймов без самообмана

Практический разбор того, почему сравнивать JavaScript и Python по одной цифре бессмысленно, и как корректно мерить скорость конкретной задачи в браузере, Node.js, Deno, Bun и CPython. Язык сам по себе почти не запускается, поэтому в результат сильно вмешиваются рантайм, архитектура, способ запуска и даже то, считаете ли вы только вычисление или ещё чтение файла, парсинг и запись результата.

https://habr.com/ru/companies/sberbank/articles/1073834/

Как ускоряют data grid в React, Vue и Svelte

Data grid для больших таблиц упирается не в выбор фреймворка, а в DOM, виртуализацию и расчёт размеров. На практике React, Vue и Svelte ведут себя почти одинаково: если попытаться отрисовать все строки сразу, браузер станет узким местом, а не сам фреймворк. В итоге тяжелую логику нужно выносить в framework-agnostic core, а в UI оставлять тонкую интеграцию и рендер только видимого окна.

https://svar.dev/blog/building-data-grid-in-react-vue-svelte/

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

Document Picture-in-Picture API позволяет открыть не видео, а любое HTML-содержимое в отдельном плавающем окне, которое остаётся поверх других окон. Это хороший способ переиспользовать уже готовый компонент вне основной страницы, но без сюрпризов с CSS и зависимостями.

https://css-tricks.com/creating-web-widgets-using-the-document-picture-in-picture-api/

WebCodecs сжал скролл-фильм с 84 до 18 МБ

WebCodecs позволяет заменить тяжёлые секвенции кадров в скролл-фильме на видеопоток с покадровым контролем и сильно снизить вес лендинга. В этом кейсе мобильная версия ужалась с 84 до 18.1 МБ, а на медленном устройстве до 11.9 МБ, при этом <video> и currentTime для такой задачи оказались слишком неточными и медленными

https://habr.com/ru/articles/1074188/

Где Vue теряет реактивность и как это чинить

Vue перестаёт обновлять экран не из-за бага, а когда вы вынимаете значение из реактивного объекта и теряете связь с прокси. На практике это всплывает после деструктуризации, при работе с вложенными ref, в watch и computed, где отслеживаются только реально прочитанные зависимости.

https://habr.com/ru/companies/otus/articles/1072130

Управляемые корутины для контроля async и памяти

Корутины на TypeScript дают контроль над асинхронностью там, где async/await уже не хватает: можно задавать приоритеты, отмену, кооперативное переключение и более предсказуемое поведение под нагрузкой. В основе подхода генераторы и планировщик, который сам решает, когда продолжать корутину, а когда уступать другим задачам. Меньше случайных пауз, проще управлять долгими циклами и конкурентными задачами, а также снижать давление на GC за счет арен памяти и пулов объектов.

https://habr.com/ru/articles/1074510/

Вы сталкиваетесь с блокировками в PostgreSQL при росте нагрузки? На открытом уроке OTUS разберём, как обеспечить высокую параллельность даже в высоконагруженных системах.

8 сентября в 20:00 — вебинар «Борьба с блокировками в PostgreSQL: как достичь высокой параллельности при большой нагрузке». Вы изучите типы блокировок, инструменты диагностики deadlock‑ов, приёмы оптимизации запросов и архитектурные best practices. В программе — реальные кейсы из продакшена и стратегии проектирования систем, выдерживающих тысячи параллельных запросов.

Урок проходит в преддверии старта курса «Высоконагруженные системы: архитектура и масштабирование». Все участники получат скидку на обучение.

Запишитесь сейчас — усилите экспертизу и научитесь строить стабильные высокопроизводительные системы.

👉 Записаться: https://otus.pw/qZY3/

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

Почему SVG-иконки теряют размер после экспорта

SVG-иконка может выглядеть крошечной, огромной или размытой не из-за поломанного файла, а из-за того, что viewBox, width/height и CSS задают размер по разным правилам. На практике это особенно заметно после экспорта из Figma, когда один и тот же SVG нормально работает как inline-элемент, но ведёт себя иначе в <img>, React-компоненте или при рендере в PNG.

https://habr.com/ru/articles/1074956/

DevSpace ускоряет проверку микрофронтендов

DevSpace можно использовать не только для бэкенда, но и для фронтенда в Kubernetes. Вместо полного CD-пайплайна локальная сборка синхронизируется прямо в pod nginx, а после загрузки запускается постобработка deploy-url. Это убирает ручную настройку hosts, раздельные порты и ожидание деплоя, поэтому интеграционные проверки микрофронтенда с хостом становятся заметно быстрее. Подход особенно полезен в монорепозиториях с микрофронтендами, но работает и для обычных SPA

https://habr.com/ru/articles/1078234/