Эра инженерной зрелости

Как выглядит стек JS-разработки в 2026 году глазами сообщества

https://habr.com/ru/companies/kaspersky/articles/1074966/

Привет!

Этим воскресным вечером мы подводим итоги розыгрыша онлайн-билета на HolyJS и поздравляем @fivefiftyeight с победой! 🎉🎉

Все остальные могут купить билет на сайте по старой цене до 1 сентября. Всем добра! ✌️

Рефракция фоновых изображений в CSS без фиксированного подхода

Для эффекта жидкого стекла можно отказаться от background-attachment fixed и вместо этого использовать view(x) и view(y) на фоне элемента внутри контейнера с overflow hidden. Фон карточки наследует фон контейнера и анимируется по background-position в зависимости от видимости внутри контейнера, а затем можно добавить смещение, blur, тени и искажения для усиления рефракции.

https://blog.master.dev/background-image-refraction-in-css/

toast-queue для доступных toast-уведомлений

Лёгкая framework-agnostic библиотека для toast-уведомлений с нормальной доступностью, очередью и прогрессивным улучшением. Она берёт на себя показ, скрытие, позиционирование, лимит видимых тостов и объявления для screen reader, так что в приложении остаётся только вызвать add(). На практике удобно, что можно отправлять как простой текст, так и объект с title, description и action, а поведение настраивается и глобально для очереди, и точечно для каждого тоста.

https://toast-queue.js.org

Как не ошибиться при работе с датами и временем

Разбор того, почему работа с датами и временем в фронтенде и бэкенде регулярно ломается, если считать таймзону просто смещением от UTC. На практике одна и та же зона меняет offset со временем, а сутки в локальном времени могут быть не 24 часа из-за переходов на летнее и зимнее время. Ключевой вывод: хранить и передавать стоит абсолютное время, а для отображения и расчётов использовать идентификаторы таймзон и библиотеку, которая знает их историю.

https://habr.com/ru/companies/ispring/articles/1053384/

Реалистичный свет для 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/

Почему 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/

Как научить ИИ писать по правилам дизайн-системы

Эксперимент показывает, что одного промпта мало: без контекста ИИ легко генерирует UI с styled.div, хардкодом цветов и несуществующими пропсами. Скилл задает правила проекта, MCP дает актуальный контракт дизайн-системы, а вместе они заметно повышают шанс получить код, который проходит typecheck и build.

https://habr.com/ru/companies/raiffeisenbank/articles/1075704/

pnpm 12 ускоряет установку без миграции

pnpm 12 переписали на Rust, но сохранили команды, флаги, lockfile и layout node_modules из pnpm 11. На практике это даёт заметный прирост скорости, особенно на повторных установках с уже прогретым кэшем. Для команд это почти безболезненное обновление, но стоит проверить совместимость в CI: убрали pnpm install --resolution-only, изменили поведение для git-зависимостей, неизвестные ключи в pnpm-workspace.yaml теперь не игнорируются.

https://www.infoq.com/news/2026/09/pnpm-12-rust/

Как хранить состояние приложения в URL

Если нужно шарить не просто страницу, а текущее состояние интерфейса, URL может хранить фильтры, содержимое редактора или целый JSON без бэкенда. Для небольших параметров достаточно query string, но для больших данных лучше использовать fragment после #, потому что он не уходит на сервер. Данные проходят цепочку сериализацию, сжатие и Base64url, а для частых изменений стоит делать debounce и обновлять адрес через history.replaceState().

https://ivakin.dev/blog/state-in-url