Методы и объекты File, Blob, FormData и URL, с помощью которых можно получать и читать файлы, создавать собственные, формировать бинарные данные и генерировать временные ссылки. Используется для реализации загрузки, предпросмотра и генерации файлов на клиенте.Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍24🔥12❤7
Привет! В этом гайде создаём компактное меню, где при клике на кнопку
+ плавно появляются дополнительные действия — микрофон, редактирование и вложение.Ключевые моменты:
• HTML: простая структура — основная кнопка и панель с иконками.
• CSS: плавное раскрытие и минималистичный стиль.
• JS: переключение состояния через класс.openдля открытия и закрытия меню.
Такое меню отлично подойдёт для интерфейсов с быстрыми действиями — заметки, чаты, панель инструментов или мобильные кнопки навигации.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍32🔥12🤝7❤5👎2
This media is not supported in your browser
VIEW IN TELEGRAM
VS Code Google Translate — помогает перевести выделенный фрагмент, получить варианты перевода и даже использовать его для именования функций, переменных или комментариев. Особенно удобно, если работаешь с мультиязычными проектами или документацией.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍24❤9🔥7
В этом посте — простой, но полезный приём, который можно внедрить в любой сайт или форму без JavaScript-файлов.
Как работает:
• При первом клике кнопка становится неактивной.
• Больше её нажать нельзя — предотвращает повторную отправку формы.
• Работает без JS-файлов, просто onclick.
Полезно при отправке форм и заказов — меньше багов, меньше повторов, больше контроля!
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥38👍16❤11😁3
Определяем, активна ли вкладка!
Когда вкладка не в фокусе, нет смысла выполнять тяжёлые операции — можно приостановить рендер, обновления данных или анимации. Для этого существует событие
Проверим текущую видимость:
Реагируем на изменение состояния вкладки:
Для удобства можно оформить в небольшую утилиту:
Вызываем сразу, чтобы получить текущее состояние при инициализации:
Пример использования:
🔥 Такой подход лежит в основе умного управления активностью приложения — автоматической паузы фоновых процессов, оптимизации real-time обновлений и снижения нагрузки.
📣 Code Ready | #практика
Когда вкладка не в фокусе, нет смысла выполнять тяжёлые операции — можно приостановить рендер, обновления данных или анимации. Для этого существует событие
visibilitychange.Проверим текущую видимость:
console.log(document.visibilityState);
// Обычно "visible" или "hidden"
Реагируем на изменение состояния вкладки:
document.addEventListener("visibilitychange", () => {
if (document.hidden) {
console.log("Вкладка неактивна — ставим процесс на паузу");
stopRendering();
} else {
console.log("Вкладка снова активна — продолжаем работу");
resumeRendering();
}
});Для удобства можно оформить в небольшую утилиту:
function onVisibilityChange(callback) {
const handler = () => callback(!document.hidden);Вызываем сразу, чтобы получить текущее состояние при инициализации:
callback(!document.hidden);
document.addEventListener("visibilitychange", handler);
return () => document.removeEventListener("visibilitychange", handler);
}
Пример использования:
const unsubscribe = onVisibilityChange(isVisible => {
console.log(`Вкладка ${isVisible ? "активна" : "скрыта"}`);
});Please open Telegram to view this post
VIEW IN TELEGRAM
🔥27👍15❤9
Разбираем Web API, который пришел на смену History API. С его помощью можно программно управлять переходами, историей и состоянием приложения без перезагрузки страницы, перехватывать и обрабатывать навигации и реализовывать нативный SPA-роутинг. Поддержка: Chrome 102+, Edge 102+, Opera 88+; Safari и Firefox — либо отсутствует, либо экспериментальна.Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍21❤11🔥11
Привет! В этом гайде создаём компактный аудио-плеер с кнопкой воспроизведения и плавным прогресс-баром.
Ключевые моменты:
• HTML: минимальная структура — кнопка Play/Pause и индикатор прогресса.
• CSS: чистое оформление, мягкая тень и плавные переходы.
• JS: логика воспроизведения, обновление прогресса и сброс состояния при окончании трека.
Такой мини-плеер отлично подойдёт для сайтов, блогов, портфолио или UI-демо, где важно добавить звук, сохранив лёгкость интерфейса.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍29❤13🔥10🤝4