Code Ready | Frontend
22.7K subscribers
933 photos
398 videos
17 files
606 links
Авторский канал по Frontend разработке.
Ресурсы, гайды, задачи, шпаргалки.
Информация ежедневно пополняется!

Автор: @energy_it

РКН: https://clck.ru/3NJCKs

Реклама на бирже: https://telega.in/c/code_ready
Download Telegram
📱 Сегодня разбираем File API — работа с файлами в браузере!

Методы и объекты File, Blob, FormData и URL, с помощью которых можно получать и читать файлы, создавать собственные, формировать бинарные данные и генерировать временные ссылки. Используется для реализации загрузки, предпросмотра и генерации файлов на клиенте.

📣 Code Ready | #шпора
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍23🔥117
📱 Интерактивное меню действий!

Привет! В этом гайде создаём компактное меню, где при клике на кнопку + плавно появляются дополнительные действия — микрофон, редактирование и вложение.

Ключевые моменты:
• HTML: простая структура — основная кнопка и панель с иконками.

• CSS: плавное раскрытие и минималистичный стиль.

• JS: переключение состояния через класс .open для открытия и закрытия меню.


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

📣 Code Ready | #гайд
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍29🔥10🤝75👎1
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Нужно быстро перевести текст, название переменной или комментарий?

VS Code Google Translate — помогает перевести выделенный фрагмент, получить варианты перевода и даже использовать его для именования функций, переменных или комментариев. Особенно удобно, если работаешь с мультиязычными проектами или документацией.

📣 Code Ready | #vscode
Please open Telegram to view this post
VIEW IN TELEGRAM
👍209🔥7
👩‍💻 Мини-трюк с HTML + CSS: защищаем кнопку от повторного клика!

В этом посте — простой, но полезный приём, который можно внедрить в любой сайт или форму без JavaScript-файлов.

Как работает:
При первом клике кнопка становится неактивной.

Больше её нажать нельзя — предотвращает повторную отправку формы.

Работает без JS-файлов, просто onclick.


Полезно при отправке форм и заказов — меньше багов, меньше повторов, больше контроля!

📣 Code Ready | #фишка
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥32👍1511😁3
Определяем, активна ли вкладка!

Когда вкладка не в фокусе, нет смысла выполнять тяжёлые операции — можно приостановить рендер, обновления данных или анимации. Для этого существует событие 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 ? "активна" : "скрыта"}`);
});


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

📣 Code Ready | #практика
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥24👍119
Please open Telegram to view this post
VIEW IN TELEGRAM
👎51👍1🤝1
📱 Navigation API — новая браузерная навигация без перезагрузки!

Разбираем Web API, который пришел на смену History API. С его помощью можно программно управлять переходами, историей и состоянием приложения без перезагрузки страницы, перехватывать и обрабатывать навигации и реализовывать нативный SPA-роутинг.

Поддержка: Chrome 102+, Edge 102+, Opera 88+; Safari и Firefox — либо отсутствует, либо экспериментальна.

📣 Code Ready | #шпора
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
4👍4🔥3