👩‍💻 Когда нужно быстро показать свой код коллегам!

Live Share — позволяет делиться сессией VS Code в реальном времени: другой человек видит твой проект, может перемещаться по файлам, писать код, запускать команды и помогать с отладкой, даже если у него нет такого же окружения.

📣 JS Ready | #vscode

Параллельные запросы без падения всего приложения — Promise.allSettled!

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

Обычно используют Promise.all, но у него есть проблема:

await Promise.all(requests); // один reject и всё падает

Если хотя бы один промис упал, теряется результат всех остальных, даже успешных. Для реального кода это почти всегда не то, что нужно.

Promise.allSettled дожидается всех промисов, независимо от ошибок:

await Promise.allSettled(requests);

Результат всегда предсказуемый, у каждого элемента есть статус и данные:

{ status: 'fulfilled', value }
{ status: 'rejected', reason }

Это идеально ложится на UI, отчёты и фоновые задачи:

const ok = results.filter(r => r.status === 'fulfilled');
const failed = results.filter(r => r.status === 'rejected');

🔥 Promise.allSettled - отличный вариант, когда важен результат каждой задачи

📣 JS Ready | #совет

👍 Попалась отличная статья, где объясняется как создать простую 3D‑игру с нуля!

В этой статье:
• Знакомство с библиотекой Three.js;
• Cоздание сцены, камеры, освещения, отрисовка, масштабирование и управление визуализацией;
• Построение логики игры;
• Чёткие объяснения каждого шага — от сетапа до ООП-архитектуры игры;

🔊 Прочитать статью можно на Habr!

📣 JS Ready | #статья

Итерация по объекту как по массиву пар с Object.entries()!

for...in перебирает enumerable строковые ключи, включая унаследованные — такие итерации требуют фильтрации через Object.hasOwn() или hasOwnProperty().

Если нужны только собственные enumerable строковые ключи — удобнее сразу использовать Object.entries().

Object.entries() возвращает пары own enumerable string-keyed свойств (без Symbol, без non-enumerable):

const user = {
  name: "Alex",
  age: 30,
  role: "developer"
};

for (const [key, value] of Object.entries(user)) {
  console.log(`${key}: ${value}`);
}

Распространённый кейс — валидации перед запуском бизнес-логики (например, запретить undefined в значениях):

Object.entries(user).forEach(([k, v]) => {
  if (v === undefined) {
    throw new Error(`Значение "${k}" не должно быть undefined`);
  }
});

Map оправдан, когда нужны частые set/delete, map.size, не-строковые ключи или словарная структура без ограничений объекта:

const userMap = new Map(Object.entries(user));
console.log(userMap.get("role"));

Нормализация объекта в массив DTO для API или записи в БД:

const dto = Object.entries(user).map(([field, value]) => ({
  field,
  value,
  updatedAt: new Date().toISOString()
}));

console.log(dto);

🔥 Такой подход делает обработку объекта структурной и удобной для масштабирования логики.

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

📂 Напоминалка по 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