📂 Напоминалка по HTTP и сетевым протоколам!

Например, HTTP/1.1 использует постоянные соединения, HTTP/2 умеет мультиплексировать запросы в одном TCP-канале, а HTTP/3 работает поверх QUIC и UDP.

На картинке — наглядная эволюция HTTP от первых версий до современных стандартов.

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

📣 JS Ready | #ресуср

Как убрать повторные запросы без флагов и состояний?

Очень частая нужно не трогать API повторно, если данные уже запрашивались.

Это можно сделать просто, используя поведение Map:

cache.get(id) ?? cache.set(id, value).get(id)

Если значение уже есть, оно сразу возвращается, если нет - создаётся, кладётся в кеш и тут же возвращается:

const getConfig = (key) =>
  cache.get(key) ??
  cache.set(key, loadConfig(key)).get(key);

Фишка в том, что в кеше можно хранить Promise, и тогда несколько вызовов одновременно получат один и тот же запрос, без дублей:

getUser(42);
getUser(42);
// fetch выполнится один раз

🔥 Пригодится при кешировании API-запросов, дедупликации параллельных вызовов, state-менеджменте без лишней синхронизации.

📣 JS Ready | #совет

Парсим курсы валют через API!

Работа с внешними API — базовая часть клиентской разработки: виджеты, расчёты, мониторинг, простая аналитика.

Сначала формируем запрос к API и получаем HTTP-ответ. На этом этапе важно проверить статус ответа, прежде чем пытаться читать данные:

async function fetchRates(base) {
  const url = `https://open.er-api.com/v6/latest/${base}`;
  const res = await fetch(url);

  if (!res.ok) {
    throw new Error(`HTTP error: ${res.status}`);
  }

  return res;
}

Теперь выносим работу с JSON и обработку ошибок в отдельный слой. Такой подход упрощает расширение логики и повторное использование функции:

async function getRates(base = "USD") {
  try {
    const res = await fetchRates(base);
    const data = await res.json();

    if (data.result !== "success" || !data.rates) {
      throw new Error("Invalid API response");
    }

    return data;
  } catch (err) {
    console.error("Ошибка получения курсов:", err.message);
    return null;
  }
}

Вызываем функцию и работаем с результатом. Перед доступом к данным проверяем, что запрос завершился успешно:

getRates("USD").then(r => {
  if (!r) return;

  console.log("Базовая валюта:", r.base_code);
  console.log("EUR:", r.rates.EUR);
  console.log("GBP:", r.rates.GBP);
  console.log("JPY:", r.rates.JPY);
});

Для более гибкого сценария используем массив кодов валют и проходимся по нему циклом. Это удобно, когда список валют динамический или приходит из конфигурации:

getRates("EUR").then(r => {
  if (!r) return;

  ["USD", "GBP", "JPY", "CNY"].forEach(code => {
    console.log(`${code}:`, r.rates?.[code] ?? "—");
  });
});

🔥 В итоге получаем аккуратный API-клиент для браузера или Node.js, который легко масштабируется: кэширование, сравнение курсов, алерты, интеграция в UI или ботов.

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

📂 Напоминалка по циклам в JavaScript!

Например, for удобно использовать, когда заранее известно количество итераций, а for...of — когда нужно пройтись по массиву или строке.

На картинке — 5 циклов, которые постоянно встречаются в коде.

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

📣 JS Ready | #ресурс

👩‍💻 Точность и согласованность кода благодаря функции автозаполнения!

IntelliCode — улучшает автодополнение в VS Code: предлагает варианты на основе контекста, типа данных и того, что ты уже написал. Удобно в больших проектах, где важно быстрее находить нужные методы и не отвлекаться.

📣 JS Ready | #vscode

Проверка наличия элемента!

Когда нужно понять, есть ли значение в массиве, раньше почти всегда делали с indexOf.

Проблема в том, что он возвращает индекс или -1, а -1 в JS - truthy, из-за чего легко написать логически неверную проверку:

if (![1, 2].indexOf(3)) {
  // выглядит приемлемо, но работает неправильно
}

Здесь ошибка не в синтаксисе, а в модели мышления, indexOf вообще не про boolean.

includes решает эту проблему на уровне API: он возвращает true или false, без неявных преобразований.

[1, 2].includes(2); // true
[1, 2].includes(3); // false

А отрицание читается ровно так, как написано:

if (![1, 2].includes(3)) {
  console.log('Not found');
}

🔥 Код короче, шансов на логическую ошибку практически нет, поэтому includes отличный выбор для проверок, а indexOf стоит оставлять только для получения индекса.

📣 JS Ready | #совет

😎 Tutorial Republic — подробный и практичный справочник по JavaScript!

Это полноценный справочник с чёткими объяснениями, примерами кода и интерактивными демо. Каждая тема сопровождается примерами, которые можно сразу попробовать и понять, как именно работает та или иная конструкция. Очень полезно и новичкам, и тем, кто хочет освежить знания или быстро найти пример по конкретной задаче.

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

📣 JS Ready | #сайт

Пишем консольную мини-игру «Быки и коровы»!

Для тех, кто не знает или забыл правила: игрок угадывает 4-значное число без повторов. Бык - цифра угадана и стоит на своём месте. Корова - цифра есть в числе, но позиция неверная.

Подключаем консольный ввод и генерируем секретное число: 4 разные цифры в случайном порядке:

const rl = require("readline").createInterface({
  input: process.stdin, output: process.stdout
});

const secret = [...new Set(
  Array.from({ length: 10 }, (_, i) => i)
)].sort(() => 0.5 - Math.random()).slice(0, 4).join("");

Здесь важно, что число создаётся один раз и не меняется до конца игры.

Главная часть игры: сравниваем ввод игрока с секретом и считаем совпадения.

const score = g => {
  let b = 0, c = 0;
  for (let i = 0; i < 4; i++)
    secret[i] === g[i] ? b++ : secret.includes(g[i]) && c++;
  return [b, c];
};

Если цифра совпала по индексу - это бык, если просто присутствует - корова.

Каждый ход - это запрос числа, валидация и подсчёт результата:

const turn = () => rl.question("Число: ", g => {
  if (!/^\d{4}$/.test(g)) return turn();
  const [b, c] = score(g);

Принимаем только корректный ввод, ровно 4 цифры, иначе ход повторяется.

Если все цифры угаданы на своих местах, игра заканчивается, иначе показываем подсказку:

  if (b === 4) return win();
  console.log(`🐂 ${b} | 🐄 ${c}`);
  turn();
});

Финал и точка входа максимально простые:

const win = () => {
  console.log(`🏆 Победа! Было: ${secret}`);
  rl.close();
};
turn();

🔥 Эта игра помогает попрактиковать работу с состоянием, пользовательским вводом и управлением асинхронным потоком

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

✍️ JS for Cats — самоучитель для тех, кто устал от скучной теории!

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

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

📣 JS Ready | #сайт

Дополнительные функции обратного вызова!

Иногда функция должна быть универсальной и вызывать колбэк только если он передан, при этом не увеличивая код проверками:

if (callback) {
  callback(data);
}

В JS это делается напрямую через optional chaining, без условий и лишней логики:

callback?.(data);

Если колбэк не передан, код просто пропускается, если передан — вызывается как обычная функция:

fetchData('/api/user');
fetchData('/api/user', data => console.log(data));

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

📣 JS Ready | #совет

👩‍💻 Живой предпросмотр Markdown-файлов во время редактирования!

Markdown Preview Enhanced — расширяет стандартный предпросмотр Markdown в VS Code. Поддерживает диаграммы, формулы, графики, Mermaid, подсветку кода, экспорт в PDF и HTML. Сразу видишь, как будет выглядеть README, документация или статья, без внешних инструментов и лишних шагов.

📣 JS Ready | #vscode