Сегодня разберёмся, как с помощью обычного Proxy можно отследить изменения в объекте и связать их напрямую с DOM — без фреймворков и лишнего кода.
В этом посте:
• Создадим реактивный объект, отслеживающий изменения.
• Свяжем его с DOM без фреймворков.
• Разберемся, как работает перехват set в Proxy.
Отличный способ заглянуть под капот реактивности и научиться управлять DOM вручную.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥17👍10❤9🤝4
Промисы — один из краеугольных камней современного JS. Мы реализуем собственный
MyPromise, поддерживающий then(), catch() и асинхронность на уровне microtasks.В этом гайде:
• Разберем жизненный цикл Promise: pending → fulfilled/rejected
• Научимся писать .then() с асинхронным исполнением
• Реализуем цепочки промисов
🔥 — если узнал что-то новое
🤝 — если уже пользовался
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
1🔥26❤16👍7🤝3
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
1❤15🔥12👍10🤝3
Современное копирование текста через Clipboard API!
Почти каждое веб-приложение сегодня требует возможности быстро скопировать данные: ссылку, токен, код. Для этой задачи используется
Начнём с базовой команды на копирование:
Этот метод возвращает промис, поэтому стоит обернуть его в аккуратную обёртку с обработкой результата:
Создадим функцию
И используем её в нужный момент (например, по клику или по горячей клавише):
🔥 Всё лаконично и нативно. Главное, что это работает во всех современных браузерах.
📣 JS Ready | #практика
Почти каждое веб-приложение сегодня требует возможности быстро скопировать данные: ссылку, токен, код. Для этой задачи используется
navigator.clipboard.Начнём с базовой команды на копирование:
const value = "https://example.com?ref=JS";
navigator.clipboard.writeText(value);
Этот метод возвращает промис, поэтому стоит обернуть его в аккуратную обёртку с обработкой результата:
navigator.clipboard.writeText(value)
.then(() => console.log("✅ Скопировано"))
.catch(err => console.error("❌ Ошибка:", err));
Создадим функцию
copyToClipboard, которую можно переиспользовать в любом месте приложения:function copyToClipboard(text) {
return navigator.clipboard.writeText(text);
}И используем её в нужный момент (например, по клику или по горячей клавише):
copyToClipboard("PROMO2025").then(() =>
console.log("Промокод отправлен в буфер 🎯")
);🔥 Всё лаконично и нативно. Главное, что это работает во всех современных браузерах.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍18❤10🤝6
В этом гайде разберём, как с помощью History API вручную управлять адресной строкой. Такой подход используется в SPA, модалках, фильтрах и динамических интерфейсах без фреймворков.
В этом гайде:
• Меняем URL с помощью pushState.
• Сохраняем состояние между вкладками.
• Реагируем на кнопку “Назад”.
• Создаём интерфейс как в приложении.
Может подойти для любого проекта, где важна гибкая навигация без лишнего кода.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤16👍12🔥6