FrontEndDev

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

https://toast-queue.js.org

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

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

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

Привет!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

https://mujs.org/

React Router v8: ленивые страницы и вложенные маршруты

В React Router v8 пакеты объединены: react-router-dom больше нет, а ключевые API импортируются напрямую из react-router. Используйте lazy + Suspense для code-splitting по страницам, Routes/Route для матчинга ветки с ранжированием, HashRouter для удобной статики и wildcard-роут * для нормального 404.

https://reactdevelopment.substack.com/p/react-router-v8-in-action-lazy-loading

Анимируем CSS border-image: градиентная рамка, которая рисуется при наведении

Свойство border-image позволяет использовать картинку или градиент как рамку вместо обычных линий. Можно также анимировать border-image-slice и управлять повторением через border-image-repeat: round.

https://css-tricks.com/animating-css-border-image/

3 хорошие привычки начинающего фронтендера

Начните думать о пользователе: увеличивайте кликабельные области. Правильно подбирайте type и inputmode для форм, чтобы браузер показывал ожидаемую виртуальную клавиатуру. Относитесь к alt осознанно: для декоративных изображений оставляйте alt="", чтобы скринридеры не озвучивали лишний шум.

https://habr.com/ru/companies/ruvds/articles/1066724/