FrontEndDev

10 September 2026 09:30

Nuxt 4.5 ускоряет SSR и обновляет сборку

Nuxt 4.5 приносит экспериментальный SSR streaming, переход на Vite 8 и новый builder на базе Rsbuild для Rspack 2. Streaming сразу отдает HTML shell и может улучшить TTFB, но не уменьшает само серверное время рендера, поэтому его стоит проверять на middleware, редиректах, cookie и кеширующих правилах. При апгрейде нужен refresh lockfile через nuxt upgrade --dedupe, потому что вместе с релизом пришли крупные изменения в unhead v3 и unctx v3.

https://www.infoq.com/news/2026/08/nuxt-4-5-streaming/

FrontEndDev

09 September 2026 09:38

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

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

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

FrontEndDev

08 September 2026 09:30

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

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

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

FrontEndDev

07 September 2026 13:56

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

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

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

FrontEndDev

04 September 2026 16:30

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

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

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

FrontEndDev

04 September 2026 09:40

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

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

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

FrontEndDev

03 September 2026 14:50

Как ускоряют 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/

FrontEndDev

02 September 2026 16:30

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

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

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

FrontEndDev

01 September 2026 16:55

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

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

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

FrontEndDev

31 August 2026 16:30

Как не ломаться на датах и таймзонах

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

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

FrontEndDev

31 August 2026 10:10

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

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

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

FrontEndDev

30 August 2026 10:03

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

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

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

FrontEndDev

20 August 2026 09:02

В нашем канале много ценного для разработчиков по подготовке к собесам👇

Уже 2 года мы развиваем комьюнити, где 10000+ разработчиков, и вместе мы тренируем собеседования и выжимаем из рынка максимум!

FrontEndDev

17 August 2026 10:19

Как реализовать JWT-аутентификацию в NestJS

Собираем базовый флоу: регистрация с хешированием пароля bcrypt, логин — через LocalStrategy и выдачу access_token, а защищённые роуты — через JwtStrategy и guard с проверкой Bearer-токена.

https://blog.logrocket.com/how-to-implement-jwt-authentication-nestjs/

FrontEndDev

14 August 2026 10:15

Где прокачать фронтенд в магистратуре

В ИТМО завершается набор на онлайн-магистратуру «Фронтенд-, бэкенд-разработка и ИИ-решения», созданную совместно с Яндекс Практикумом. Программа рассчитана на два года и подойдет и тем, кто только начинает путь в разработке, и действующим специалистам.

В программе:

- 9 треков под разный уровень и стек: от JavaScript, Python, Java и C++ до продвинутых направлений с асинхронностью, микросервисами, высокими нагрузками, Kafka, Spring Boot, NestJS и C++/Boost;

- Нейросети как рабочий инструмент: на всех треках изучают промпт-инжиниринг и применение ИИ для генерации кода, тестов и документации, дебаггинга и других задач;

- Отдельный трек по ИИ в разработке – проектирование LLM-систем, RAG-пайплайны, мультиагентные сети и внедрение AI-компонентов в продакшен;

- Практика на реальных задачах партнеров программы и сервисов Яндекса. Соберете 10+ кейсов в портфолио и сможете работать над собственным проектом;

Обучение проводиться онлайн и в вечернее время – так можно совмещать учебу с работой. Также сохраняются студенческие льготы и возможность отсрочки от армии.

Выпускники получат диплом магистра ИТМО и диплом о профессиональной переподготовке от Яндекс Практикума.

Посмотреть программу и условия поступления

FrontEndDev

09 September 2026 16:30

Vercel AI SDK для структурированного AI-вывода

Vercel AI SDK и AI Gateway позволяют вызывать разные модели из бэкенда приложения и получать не просто текст, а структурированный ответ по Zod-схеме. Это удобно, когда AI должен создавать данные в формате, который сразу можно сохранить в базу и переиспользовать в существующих компонентах. Это снимает привязку к одному провайдеру, упрощает фолбэки между моделями и даёт контроль над форматом ответа, а не только над промптом.

https://blog.master.dev/having-fun-with-vercels-ai-sdk-and-ai-gateway/

FrontEndDev

08 September 2026 17:09

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/

FrontEndDev

07 September 2026 17:24

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

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

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

FrontEndDev

07 September 2026 10:53

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

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

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

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

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

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

FrontEndDev

04 September 2026 14:51

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

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

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

FrontEndDev

03 September 2026 16:30

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

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

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

FrontEndDev

03 September 2026 09:30

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

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

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

FrontEndDev

01 September 2026 18:01

🔴 Тестовое собеседование на Frontend-разработчика со старшим разработчиком ex. Сбер

3 сентября(в четверг!) в 19:00 по мск приходи онлайн на открытое собеседование, чтобы посмотреть на настоящее интервью на Middle Frontend-разработчика.

Как это будет:
📂 Даниил Дмитриев, старший разработчик в R-Vision, ex. Сбер, будет задавать реальные вопросы и задачи разработчику-добровольцу
📂 Даниил будет комментировать каждый ответ респондента, чтобы дать понять, чего от вас ожидает собеседующий на интервью
📂 В конце можно будет задать любой вопрос Даниилу

Это бесплатно. Эфир проходит в рамках менторской программы от ШОРТКАТ для Frontend-разработчиков, которые хотят повысить свой грейд, ЗП и прокачать скиллы.

Переходи в нашего бота, чтобы получить ссылку на эфир → @shortcut_front_bot

Реклама.
О рекламодателе.

FrontEndDev

01 September 2026 15:04

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

FrontEndDev

31 August 2026 15:30

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

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

https://toast-queue.js.org

FrontEndDev

30 August 2026 20:18

Привет!

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

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

FrontEndDev

28 August 2026 14:28

Ховер близости в CSS для сетки без JavaScript

Показываем эффект hover proximity: при наведении на элемент в CSS grid, элемент масштабируется и также стили применяются к соседним ячейкам с учетом их координат. Реализация опирается на современные возможности CSS, включая view-timeline, кастомные свойства и условное применение стилей, сохраняя отзывчивость сетки.

https://blog.master.dev/hover-proximity-using-modern-css/

FrontEndDev

17 August 2026 12:34

⚡️⚡️HolyjS снова собирает JS-разработчиков. Уже 10-ый год подряд!

Уже десять лет мы вместе с JS-сообществом следим за тем, как меняется экосистема, разбираемся в новых технологиях и собираем инженеров, которым интересно копать глубже и смотреть на разработку с разных ракурсов.

🎇В программе нового сезона — глубокие технические доклады про язык и его экосистему, производительность, архитектуру, Node.js, фреймворки и инструменты разработки. И, конечно, не будем делать вид, что ИИ не существует: поговорим о том, как его уже сегодня применяют во фронтенде и какие инженерные задачи он помогает решать на практике.

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

🗓 23–24 октября HolyJS пройдет в Санкт-Петербурге и онлайн.

Программа постепенно пополняется новыми докладами.
Билеты уже в продаже: можно купить индивидуальный или оформить корпоративное участие для команды. Все подробности — на сайте.

🚀 А у подписчиков FrontEndDev есть уникальная возможность выиграть онлайн билет! Заполняйте простую форму — итоги подведем 30 августа! Всем удачи! ✌️

FrontEndDev

16 August 2026 11:13

Отложенные и мгновенные подсказки на чистом HTML + CSS

Вместо setTimeout и сложного шаринга состояния в JS можно сделать UX-тайминг tooltip’ов через popover="hint" и CSS: подсказка сначала появляется с задержкой для случайных проходов курсора, а затем — мгновенно при повторном наведении.

https://master.dev/blog/delayed-then-instant-tooltips-with-html-css-alone/

FrontEndDev

14 August 2026 09:25

µJS — лёгкая библиотека AJAX-навигации

µJS ускоряет сайт без фреймворков: перехватывает клики по ссылкам и отправку форм, подгружает новую HTML-страницу в фоне и заменяет только изменившийся контент, без полной перезагрузки. Библиотека весит около 5KB gzipped, не требует сборки и работает с любым бэкендом — достаточно подключить один скрипт и вызвать mu.init().

https://mujs.org/