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/

Когда все решения сходятся к тимлиду, команда начинает ждать, а руководитель — работать за всех. Согласования, приоритеты и спорные вопросы постепенно превращают его в узкое место, которое ограничивает скорость всей команды.

9 сентября в 20:00 МСК на открытом уроке разберём, как распределять ответственность и сохранять управляемость процессов без постоянного личного участия в каждом решении.

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

Открытый урок проходит в преддверии старта курса «Руководитель команд в ИТ». Примите участие, если хотите меньше контролировать каждую задачу и больше управлять системой работы команды: https://otus.pw/v4fB/

Реклама. ООО «Отус онлайн-образование», ОГРН 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/

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

Эксперимент показывает, что одного промпта мало: без контекста ИИ легко генерирует 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