JavaScript Ready | Программирование
8.31K subscribers
996 photos
60 videos
530 links
Авторский канал по разработке на JavaScript.
Ресурсы, обучения, задачи, шпаргалки.
Ежедневно информация пополняется!

Cотрудничество: @energy_c
Download Telegram
📱 Хотите понять, как Vue и Svelte "волшебным образом" обновляют DOM при изменении данных?

Сегодня разберёмся, как с помощью обычного Proxy можно отследить изменения в объекте и связать их напрямую с DOM — без фреймворков и лишнего кода.

В этом посте:
• Создадим реактивный объект, отслеживающий изменения.

• Свяжем его с DOM без фреймворков.

• Разберемся, как работает перехват set в Proxy.


Отличный способ заглянуть под капот реактивности и научиться управлять DOM вручную.

📣 JS Ready | #гайд
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥17👍10❤9🤝4
📱 Promise под капотом: реализуем свой с нуля по стандарту A+

Промисы — один из краеугольных камней современного JS. Мы реализуем собственный MyPromise, поддерживающий then(), catch() и асинхронность на уровне microtasks.

В этом гайде:
• Разберем жизненный цикл Promise: pending → fulfilled/rejected

• Научимся писать .then() с асинхронным исполнением

• Реализуем цепочки промисов


🔥 — если узнал что-то новое
🤝 — если уже пользовался


📣 JS Ready | #гайд
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
📱 Разбираем часто используемые ключевые слова!

Это фундаментальные кирпичики любого кода. Ключевые слова отвечают за область видимости, асинхронность, контекст выполнения, создание объектов и многое другое.

📣 JS Ready | #шпора
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!

Почти каждое веб-приложение сегодня требует возможности быстро скопировать данные: ссылку, токен, код. Для этой задачи используется 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("Промокод отправлен в буфер 🎯")
);


🔥 Всё лаконично и нативно. Главное, что это работает во всех современных браузерах.

📣 JS Ready | #практика
Please open Telegram to view this post
VIEW IN TELEGRAM
👍18❤10🤝6
📱 Управляем URL без перезагрузки страницы!

В этом гайде разберём, как с помощью History API вручную управлять адресной строкой. Такой подход используется в SPA, модалках, фильтрах и динамических интерфейсах без фреймворков.

В этом гайде:
• Меняем URL с помощью pushState.

• Сохраняем состояние между вкладками.

• Реагируем на кнопку “Назад”.

• Создаём интерфейс как в приложении.


Может подойти для любого проекта, где важна гибкая навигация без лишнего кода.

📣 JS Ready | #гайд
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤16👍12🔥6