🤓 Напоминалка для работы с 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 | #совет

😎 JavaScript Airbnb Style Guide — суперполезное руководство по написанию JS кода!

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

Оставляю ссылочку: GitHub 📱

📣 JS Ready | #репозиторий

Параллельные запросы с лимитом (concurrency limit)!

Часто нужно обработать много задач (запросы, загрузки, расчёты), но не валить всё сразу в сеть/CPU. Сделаем простой пул, который держит, например, максимум 3 задачи одновременно.

Основа пула:

async function runWithLimit(tasks, limit = 3) {
  const results = Array(tasks.length);
  let i = 0;

Создаём воркера, который будет запущен в нескольких параллельных экземплярах:

  const worker = async () => {
    while (i < tasks.length) {
      const idx = i++;
      try {
        results[idx] = await tasks[idx]();
      } catch (e) {
        results[idx] = { error: e.message };
      }
    }
  };

Стартуем limit воркеров параллельно и ждём их завершения. После этого возвращаем массив результатов в исходном порядке:

  await Promise.all(Array.from({ length: limit }, () => worker()));
  return results;
}

Каждая задача — функция, возвращающая Promise:

const tasks = Array.from({ length: 10 }, (_, i) => async () =>
  fetch(`https://jsonplaceholder.typicode.com/todos/${i + 1}`).then(r => r.json())
);

Запускаем с лимитом 3. Несмотря на параллельность, порядок результатов будет совпадать с порядком задач:

runWithLimit(tasks, 3).then(data => {
  console.log("Готово:", data.length);
  console.log("Первый элемент:", data[0]);
});

Если результаты не нужны, но нужен контроль нагрузки — запускаем так же, просто не используем массив в .then:

runWithLimit(tasks, 5).then(() => console.log("Пачка выполнена"));

🔥 Контроль параллельности без библиотек: стабильный поток задач, меньше шансов упереться в rate-limit и предсказуемое потребление ресурсов.

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

Proxy как отладочный “защитный экран” для объектов!

Иногда хочется увидеть каждое обращение к объекту, но писать вручную лог на каждый .prop долго и не всегда удобно.

const user = { name: 'Sam', age: 28 };

Оборачиваем объект в Proxy и ловим любые GET/SET автоматически:

const user = watch({ name: 'Sam', age: 28 });

Теперь любое чтение или запись покажется в консоли интерактивно:

user.age;      // GET - age
user.age = 30; // SET - age 30

Можно быстро сделать защиту от несуществующих полей (экономит время при отладке чужого кода):

const safe = obj => new Proxy(obj, {
  get: (t,p) => p in t ? t[p] : (console.warn('No key:',p), undefined)
});
safe({ a: 1 }).b;

🔥 Proxy даёт способ следить за объектом и ловить доступ к полям без переписывания исходного кода. Удобно, когда отлаживаешь динамику или работаешь с чужими структурами.

📣 JS Ready | #совет

❤️ JavaScript Interview Questions — подборка вопросов для подготовки к собеседованиям!

Этот репозиторий отличная шпаргалка для тех, кто готовится к собесам или хочет укрепить знания. В нём собраны ключевые вопросы по синтаксису, типам данных, областям видимости, замыканиям, промисам, async/await и др. важным темам, которые часто встречаются. Можно бегло пройтись по вопросам, чтобы вспомнить слабые места.

Оставляю ссылочку: GitHub 📱

📣 JS Ready | #репозиторий

Отменяем fetch по таймауту!

Иногда fetch должен сам отмениться, если сервер думает слишком долго, без логики таймаута и Promise-обёрток.

const c = new AbortController();

Контроллер создаёт сигнал отмены, который понимает fetch.

Задаём обычный таймаут, чтобы сделать отмену, если ответ не пришёл вовремя:

setTimeout(() => c.abort(), 1000);

Через секунду запрос прервётся.

Передаём сигнал прямо в fetch и он станет отменяемым нативно:

await fetch(url, { signal: c.signal });

Если запрос отменится, промис упадёт с AbortError.

Проверяем интерактивно в консоли, как это выглядит при обрыве:

try {
  const c = new AbortController();
  setTimeout(() => c.abort(), 500);
  await fetch('https://httpbin.org/delay/2', { signal: c.signal });
} catch (e) {
  console.log(e.name); // AbortError
}

🔥 AbortController + signal дают нативный способ отменять fetch по таймауту, без лишнего кода.

📣 JS Ready | #совет

👩‍💻 Пытаешься не потеряться среди сотен строк?

TODO Highlight — расширение, которое делает комментарии TODO, FIXME, NOTE и другие заметными прямо в файле, подсвечивая их. Помогает быстрее находить, что осталось доделать, придавая наглядность задачам.

📣 JS Ready | #vscode