Telegram Web Link
🔧 Как правильно использовать requestIdleCallback для второстепенных задач

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

Почему важно:

📍 Делает сайт отзывчивее

📍 Переносит «тяжёлые» задачи на потом

📍 Улучшает производительность без ущерба для UX

Как использовать:

1. Запускаем задачу, когда браузер «свободен»:


requestIdleCallback(() => {
// Эта операция не помешает UI
localStorage.setItem('draft', JSON.stringify(formData));
});


2. Полифил для браузеров без поддержки (например, Safari, Firefox):


const ric = window.requestIdleCallback || function (cb) {
return setTimeout(() => cb({ timeRemaining: () => 0 }), 1);
};


3. Пример: предзагрузка данных во время простоя


requestIdleCallback(() => {
fetch('/api/hints')
.then(res => res.json())
.then(storeHints);
});


4. Используем timeRemaining() для контроля:


requestIdleCallback(deadline => {
while (deadline.timeRemaining() > 0 && tasks.length) {
runTask(tasks.pop());
}
});


Когда использовать:

— Метрики и логирование

— Предзагрузка и кеширование

— Фоновая запись в IndexedDB

— Подсказки, превью и прочий «сервисный» UI

⚠️ requestIdleCallback не поддерживается в Safari и Firefox. Для кроссбраузерности используйте полифил, как показано выше.

🐸 Библиотека фронтендера

#буст
Please open Telegram to view this post
VIEW IN TELEGRAM
👍82👏1
Первый вебинар нашего курса по AI-агентам уже прошёл!

Запись уже выложили на обучающей платформе — можно влетать и догонять с комфортом.

Первые слушатели уже оставили фидбэки — и, кажется, мы попали в точку:
— «теперь наконец понял, как выбирать модели под задачу — раньше брал первую попавшуюся»
— «без лишнего, по делу, в лайве — кайф»
— «огонь, ожидания 100% оправданы лично у меня»

Если хотели вписаться, но сомневались — ещё не поздно. Вебинары идут вживую, записи сохраняются, чат работает, материалы открыты.

Ещё можно догнать и пройти всё вместе с потоком.

👉 Залетай на курс
👍4
🐶 Как отладить CSS, чтобы он не ломался в Safari и не стыдно было читать

Вёрстка может выглядеть по-разному на разных браузерах. Этот промпт поможет вам улучшить поддержку кросс-браузерных решений и сделать код более понятным и удобным.

Промпт:

Review my CSS and fix cross-browser issues, improve maintainability, and add comments explaining non-obvious parts.


Чем полезен:

➡️ Показывает несовместимые свойства и предлагает fallbacks

➡️ Рефакторит дублирующиеся или переопределяющиеся правила

➡️ Добавляет комментарии к нестандартным решениям, чтобы через месяц не забыть

💡 Дополнительно можно запросить:

— Советы по организации CSS (например, BEM, layers, atomic CSS)

— Рекомендации по улучшению производительности (критические стили, purge)

— Интеграцию с Autoprefixer или PostCSS

🐸 Библиотека фронтендера

#буст
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5👍1🥱1👾1
🔑 Как я решал проблему с аутентификацией через OAuth2 в SPA

Один из подписчиков поделился своим опытом:

«Когда мы начали интегрировать OAuth2 для аутентификации в нашем SPA на React, проблемы начали сыпаться одна за другой. Хранение токенов, обновление сессий без перезагрузки страницы — всё это стало настоящим головным болем.

Мы решили хранить токены в httpOnly cookie для безопасности — так они менее уязвимы для атак. Но вот как обновить их, не теряя сессию?

Тогда мы написали кастомный хук, который управляет аутентификацией и следит за обновлением токенов в фоне. Это немного облегчило жизнь и сделало обновление сессии почти незаметным для пользователя.

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


А вы сталкивались с подобными трудностями при интеграции OAuth2? Как решали такие задачи?

🐸 Библиотека фронтендера

#междусобойчик
Please open Telegram to view this post
VIEW IN TELEGRAM
2025/07/10 22:58:02
Back to Top
HTML Embed Code: