🔧 Как правильно использовать 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. Для кроссбраузерности используйте полифил, как показано выше.

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

#буст

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

#развлекалово

🐶 Как отладить 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

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

#буст

🔑 Как я решал проблему с аутентификацией через OAuth2 в SPA

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

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

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

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

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

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

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

#междусобойчик

🖥 Фишка инструмента: типо-осведомлённый линт без TypeScript

Biome умеет ловить ошибки с промисами (например, забытые await) даже в обычном JS, без TypeScript.

Например:

button.addEventListener('click', async () => {
  fetch('/api')
})

Biome подсветит: «у вас async-функция возвращает промис, и он не обработан» → потенциальная утечка ошибок.

✅ ESLint такое ловит только с TypeScript и кучей плагинов.

✅ Biome делает это быстро и без лишнего шума.

✅ Работает через правило noFloatingPromises, включается одной строкой в biome.json

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

#буст

1 строчка кода — дебаты на 17 комментариев 😁

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

#развлекалово

🚬 Не фича, а почти рефлекс фронтенда

Подсказка: он не виден на экране, но без него интерфейс — просто картинка. Тихий наблюдатель, который просыпается при первом твоём движении.

Какой термин зашифрован! Пишите свою версию ✏️

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

#междусобойчик

🎮 Прокачка без курсов: сам себе ментор и тренажер

Подборка интерактивных ресурсов, которые помогут прокачать навыки на практике.

➡️ Flexbox Froggy — классика, которая не стареет: расставляй лягушек по лилиям через Flexbox.

➡️ LittleJS Games / Code Sketches — набор мини-игр, написанных на ванильном JS. Можно редактировать и запускать прямо в браузере.

➡️ JavaScript30 от Wes Bos — 30 мини-проектов без фреймворков: часы, видеоплееры, слайдеры.

➡️ RegexLearn — интерактивное обучение регулярным выражениям: объясняет каждую часть и даёт практику с фидбеком.

➡️ JS Challenger — задачи с автофидбеком по темам: строки, числа, объекты, массивы.

➡️ CSSBattle — нестандартный челлендж: воссоздай фигуру минимальным CSS-кодом.

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

#свежак

❓ Задача: лишний ререндер

Вы заметили, что компонент повторно рендерится при каждом изменении родителя, хотя его пропсы остаются теми же.

В коде используется функциональный компонент, передаётся onClick, определённый внутри родителя как анонимная функция.

Как можно избежать лишнего рендера этого компонента? 😐

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

#междусобойчик

😎 Топ-вакансий для фронтендеров за неделю

Junior Frontend Developer (React) — от 160 000 ₽, офис/гибрид (Москва)

Frontend-разработчик JavaScript — 130 000 - 165 000 ₽, удаленно (Санкт-Петербург)

Software Engineer (JavaScript) — 4 000 - 5 500$, удаленно (США)

Эксперт по web-разработке — 200 000 —‍ 240 000 ₽, удаленно (Москва)

Senior Front-End Developer — от 200 000 ₽, удаленно (Москва)

➡️ Еще больше топовых вакансий — в нашем канале Javascript jobs

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

#свежак

🎮 Управление состоянием с использованием useReducer

Проблема: управление сложным состоянием в React-приложении может стать трудным и запутанным, особенно при наличии множества состояний и действий.

Решение: в книге «Learn React Hooks, 2nd Edition» автор предлагает использовать хук useReducer для централизованного управления состоянием. Это позволяет более эффективно обрабатывать сложные состояния и действия.

Пример кода:

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </>
  );
}

Преимущества:

— Централизованное управление состоянием.
— Лёгкость в добавлении новых состояний и действий.
— Чистота и предсказуемость кода.

➡️ Еще больше полезных книг — в нашем канале @progbook

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

#буст