FrontEndDev

12 September 2026 14:50

Как сделать SVG-иконки живее с squash and stretch

Разбор приёма squash and stretch для SVG-микроинтеракций. Он помогает сделать иконки и стрелки более естественными и заметными без тяжёлой анимации: можно анимировать path через CSS, а для более широкой поддержки использовать Motion. Практически это даёт более приятный hover-эффект, учитывает prefers-reduced-motion и лучше работает, если вместо обычного state-based hover запускать короткую анимацию по событию.

https://www.joshwcomeau.com/animation/squash-and-stretch/

FrontEndDev

11 September 2026 14:50

Knip для Angular: чистим мертвый код автоматически

Knip помогает в крупных Angular и TypeScript-проектах находить неиспользуемые зависимости, файлы, экспорты и битые импорты, а затем держать это под контролем через pre-commit и CI/CD. В проекте с Nx workspace его настроили через knip.config.ts, автогенерацию workspaces и валидацию конфигурации, чтобы не полагаться на ручную проверку.

https://habr.com/ru/companies/tbank/articles/1078438/

FrontEndDev

10 September 2026 17:01

22-23 сентября приглашаем на АЛЬФА ВААА{АИ}ЙЙЙБ ХАКАТОН. Создавайте проект высоконагруженного прокси, соревнуйтесь за 2,3 миллиона рублей, общайтесь в комьюнити топовых вайб-кодеров.

Всех участников пригласим 30 сентября на АЛЬФА ВААА{АИ}ЙЙЙБ МИТАП. Узнаем, кто из финалистов получит миллион, зажжём на техно-рейве с группой ЛАУД и проведём ток-шоу про нейросети.

Скорее регистрируйтесь

FrontEndDev

10 September 2026 14:50

pipenet для быстрого туннеля локального сервера

pipenet — open source альтернатива localtunnel, которая позволяет поднять собственную туннельную инфраструктуру и быстро открыть локальный сервер в публичном интернете. Полезно, когда нужно показать фронтенд, бэкенд или webhook без ручной настройки прокси и лишней возни с сетями.

https://github.com/punkpeye/pipenet

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

11 September 2026 16:30

Как разложить React-проект по папкам

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

https://www.robinwieruch.de/react-folder-structure/

FrontEndDev

11 September 2026 09:30

Как быстро проверить HTML-письмо в Gmail

HTML-письмо можно вставить прямо в Gmail и сразу увидеть, как оно выглядит перед отправкой. Это удобно для быстрой проверки верстки, особенно если письмо собрано в MJML или другом шаблонизаторе и нужен финальный HTML без лишних шагов. Для реальной рассылки обычно всё равно используют сервисы вроде Mailchimp или Postmark, но для быстрого теста такой способ экономит время и помогает поймать проблемы с отображением раньше.

https://blog.codepen.io/2026/08/31/chris-corner-what-do-you-do-with-an-html-email/

FrontEndDev

10 September 2026 16:30

CSS random() для кроссбраузерной случайности

Появился полифилл для будущей CSS random(), который позволяет использовать случайные значения в стилях в Chrome, Firefox и Safari без переписывания на JavaScript. Это полезно для эффектов вроде конфетти, звездного фона и других декоративных элементов, где нужна управляемая случайность прямо в CSS. На практике нужно подключить скрипт, пометить нужные элементы классом randomized и записывать случайные значения в custom properties с префиксом --random, чтобы код остался совместимым с нативной реализацией, когда она доедет до всех браузеров.

https://css-tricks.com/css-random-function-polyfill/

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/