😎 Банальный, но всё равно классный и полезный сайт про которой знают многие — CodePen

Это популярная онлайн-платформа для разработчиков, где можно создавать, тестировать и делиться кодом (HTML, CSS, JavaScript) в реальном времени.

Она позволяет писать код прямо в браузере, видеть результат мгновенно и экспериментировать с фронтенд-разработкой.

📌 Оставляю ссылочку: codepen.io

📣 JS Ready | #сайт

👍 Крутая статья, в которой автор наглядно показывает, как сделать индикатор загрузки файлов на JavaScript — без лишних библиотек и с полной кастомизацией!

В этой статье:
• Создаёте кастомный загрузчик с прогресс-баром на чистом JS
• Узнаёте, как работать с FormData, XMLHttpRequest и событием progress.
• Добавляете обработку ошибок и визуальные уведомления.
• Получаете рабочий пример, который легко адаптировать под свой проект.

🔘 Продолжить читать можешь на WebFanat!

📣 JS Ready | #статья

Exercism — это платформа для изучения программирования через практические задания. Можно практиковаться на 70 различных языках, в том числе и на JS.

📌 Ссылочка: exercism.org

📣 JS Ready | #сайт

Ты вообще тут?

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

Создадим скрипт, который будет отслеживать активность мыши, клавиатуры и видимость вкладки.

Начнём с базовых переменных.
Нам нужен флаг активности и таймер, который будет срабатывать при бездействии:


let isUserActive = true;
let afkTimeout = null;
const AFK_DELAY = 2 * 60 * 1000; // 2 минуты



Создаём функцию активности.
Если пользователь активен — сбрасываем таймер. Если нет — логируем "AFK":


function markUserActive() {
  isUserActive = true;
  clearTimeout(afkTimeout);
  afkTimeout = setTimeout(() => {
    isUserActive = false;
    console.log("AFK...");
  }, AFK_DELAY);
}



Регистрируем действия, при которых считаем пользователя активным:


['mousemove', 'keydown'].forEach(evt =>
  document.addEventListener(evt, markUserActive)
);



Следим за вкладкой.
Если пользователь переключился на другую — сбрасываем активность:


document.addEventListener('visibilitychange', () => {
  isUserActive = !document.hidden;
  if (isUserActive) markUserActive();
});



Готово!
Теперь ты можешь реагировать на бездействие:
отключать фоновые процессы, ставить статус "AFK" или приостанавливать тяжёлые операции.

📣 JS Ready | #практика