Методы и объекты File, Blob, FormData и URL, с помощью которых можно получать и читать файлы, создавать собственные, формировать бинарные данные и генерировать временные ссылки. Используется для реализации загрузки, предпросмотра и генерации файлов на клиенте.Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍23🔥11❤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
👍29🔥10🤝7❤5👎1
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
👍20❤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
🔥32👍15❤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
🔥24👍11❤9
Держи сотни гигабайт свежих уроков, и каждую неделю мы подкидываем ещё!
• 1612 ГБ — DevOps
• 1402 ГБ — Python
• 1300 ГБ — C, C++
• 1815 ГБ — Frontend
• 1515 ГБ — Backend
• 898 ГБ — ИБ, Хакинг
• 996 ГБ — Kotlin, Swift
• 212 ГБ — JavaScript
• 315 ГБ — Flutter
• 820 ГБ — Go, PHP
• 419 ГБ — Java, Rust
• 648 ГБ — GameDev
• 517 ГБ — Windows, Linux
• 998 ГБ — Дизайн (UX/UI)
• 617 ГБ — Нейросети (ML/RL)
• 546 ГБ — БД (SQL & NoSQL)
• 687 ГБ — Аналитика данных
• 115 ГБ — QA-тестирование
Подписывайся и не плати за то, что можно получить бесплатно
Please open Telegram to view this post
VIEW IN TELEGRAM
👎5❤1👍1🤝1
Разбираем 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
❤4👍4🔥3