😎 DevDocs — обучения через документацию!

Здесь собраны структурированные документации по JS и смежным технологиям, ориентироваться в темах быстро и удобно. Можно подтянуть понимание языка: методы массивов, строки, даты, поведение консоли, обработка событий и многое другое. Открываешь документацию, понимаешь механику, ограничения и реальные сценарии использования.

📌 Оставляю ссылочку: devdocs.io

📣 JS Ready | #ресурс

Работаем с LocalStorage в браузере!

LocalStorage используют для сохранения небольших данных на клиенте: состояния интерфейса, фильтров, тем, настроек или кэша состояния пользователя. Лимит хранения — несколько мегабайт (зависит от браузера).

Сохранение и чтение строки — самый базовый сценарий, подходит для флагов UI или режимов отображения:

localStorage.setItem("view", "list");
console.log(`Текущий view: ${localStorage.getItem("view")}`);

LocalStorage хранит только строки, поэтому для объектов нужна сериализация. Это стандарт при работе с конфигами и кэшем состояния:

const session = { user: "admin", ttl: 600 };
localStorage.setItem("session", JSON.stringify(session));

При чтении JSON стоит защитить парсинг от ошибок, и проверить null перед парсингом, чтобы приложение не падало при битых данных или пустом ключе:

const raw = localStorage.getItem("session");
let data = null;
if (raw) {
  try {
    data = JSON.parse(raw);
  } catch {
    data = null;
  }
}
console.log("Пользователь:", data?.user);

Обновление отдельных полей без потери остальных ключей — частая задача для хранения пользовательских предпочтений:

const prefs = JSON.parse(localStorage.getItem("prefs") || "{}");
prefs.theme = "dark";
prefs.updatedAt = Date.now();
localStorage.setItem("prefs", JSON.stringify(prefs));
console.log("Предпочтения сохранены");

Событие storage помогает синхронизировать состояние между вкладками (но не срабатывает в той же вкладке, где вызван setItem):

window.addEventListener("storage", (e) => {
  console.log(`Обновлён ключ: ${e.key}, значение: ${e.newValue}`);
});

🔥 LocalStorage объединяет хранение и быстрый доступ на клиенте, что упрощает восстановление UI и ускоряет работу интерфейса.

📣 JS Ready | #практика

🤓 Напоминалка для работы с Git.

Например, git push отправляет твои изменения на сервер, а git checkout позволяет быстро переключаться между ветками.

На картинке — 12 самых нужных команд, которые стоит держать под рукой.

Сохрани, чтобы не забыть!

📣 JS Ready | #ресурс

“Одноразовый” import для быстрого теста без бандлера и лишних файлов!

В браузере HTTP-ответы ESM могут попадать в memory/disk cache, поэтому после правки файла обычный import может не подхватить изменения:

await import('./module.js');

Чтобы гарантировать запрос свежей версии, добавляем динамический query-параметр (cache-buster), который меняет URL:

await import(`./module.js?u=${Date.now()}`);

Теперь при каждом вызове браузер будет запрашивать модуль заново, и вы сразу видите последние правки:

const mod = await import(`./calc.js?u=${Date.now()}`);
mod.test();

Никаких рестартов и ручной очистки кеша:

await import(`./config.js?u=${Date.now()}`).then(m => m.init());

🔥 Динамический import с cache-buster меняет URL и помогает получать свежую версию модуля без сборки и ручной очистки кеша. На поведение могут влиять Service Worker, прокси и политики HTTP-кеша.

📣 JS Ready | #совет

🎄 Всех с наступающим!

Желаю каждому провести новый 2026 год намного лучше и выполнить все планы. Моя цель: набрать более 15 тысяч подписчиков.

Генератор QR-кодов прямо в браузере!

QR-коды часто нужны в разработке: передача ссылок, упаковка тестовых данных, автоматизация, обмен данными для ботов. Сделаем генератор на чистом JavaScript с помощью qrcode.

Подключаем библиотеку в браузер через CDN как ES-модуль:

<script type="module">
  import QRCode from "https://cdn.jsdelivr.net/npm/qrcode@1.5.3/+esm";
  // Делаем доступным глобально, чтобы примеры ниже работали при копипасте
  window.QRCode = QRCode;
</script>

Создаём функцию генерации QR в DataURL (data:image/png;base64,... по умолчанию):

async function generateQR(text) {
  try {
    const url = await QRCode.toDataURL(text, { width: 300 });
    console.log("QR DataURL:", url);
    return url;
  } catch (e) {
    console.error("Ошибка генерации QR:", e);
    return null;
  }}

Генерируем QR для ссылки или текста:

generateQR("https://example.com").then(qr => {
  if (qr) console.log("QR успешно создан");
});

Формально вызовы идут параллельно (fire-and-forget). Если нужен контроль завершения — используем Promise.all, но для простых задач достаточно forEach:

["Alpha", "Beta", "Gamma"].forEach(t => {
  generateQR(t).then(qr => console.log(`QR для ${t}:`, !!qr));
});

Генерация QR для JSON:

const payload = JSON.stringify({ id: 123, role: "tester", active: true });
generateQR(payload).then(qr => console.log("QR для JSON готов:", !!qr));

Можно кодировать JSON, токены и любые строковые данные.

🔥 В итоге получаем простой инструмент для генерации QR-кодов под большинство данных прямо в браузере. Легко встраивается в проекты, тестовые утилиты и ботов.

📣 JS Ready | #практика

👩‍💻 Пишешь на Next.js и устал каждый раз вручную набирать однотипные фрагменты?

Next JS/TS Snippets — расширение, которое даёт готовые сниппеты для самых распространённых конструкций: маршруты, API-роуты, компонентные страницы, layout, middleware и многое другое, причем сразу с TypeScript-поддержкой. Экономит время, уменьшает количество опечаток и делает разработку проекта куда быстрее и приятнее.

📣 JS Ready | #vscode

Асинхронный console.time() для замера промисов!

Нужно быстро померить, сколько живёт fetch, Promise.all или любая async-цепочка?

Обычный console.time() для этого подходит, но многие забывают, что он прекрасно работает с await:

console.time('load');

Ставим await на промис, делаем интерактивный тест в консоли:

await new Promise(r => setTimeout(r, 500));

Закрываем замер и сразу видим время выполнения, без создания переменных и обёрток:

console.timeEnd('load'); // ~500ms

То же самое работает и с группой промисов, удобно сравнивать подходы прямо в REPL:

console.time('race');
await Promise.race([
  new Promise(r => setTimeout(r, 300)),
  new Promise(r => setTimeout(r, 800))
]);
console.timeEnd('race'); // ~300ms

🔥 console.time() + await — простой и нативный способ замерить async-код и сразу увидеть разницу в поведении промисов.

📣 JS Ready | #совет