😎 Codepip — крутой тренажёр для разработчиков!

Хочешь прокачать навыки HTML, CSS или JavaScript без скучных учебников? На Codepip учёба превращается в лёгкий и увлекательный процесс. Каждый уровень - это маленький челлендж, который заставит думать как программист и писать правильный код.

📌 Попробуйте сами: codepip.com

📣 JS Ready | #ресурс

📱 Когда нужно показать цену, процент или большое число!

Есть нативный, удобный и мульти-языковой API — Intl.NumberFormat. Он форматирует числа, валюты, проценты и даже компактные обозначения (“1.2K”, “3M”) по правилам конкретного региона.

Пример для валюты:

new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'EUR'
}).format(1299.99);
// → 1.299,99 €

Или для процентов:

new Intl.NumberFormat('en-US', {
  style: 'percent',
  maximumFractionDigits: 1
}).format(0.875);
// → 87.5%

Или короткие числа:

new Intl.NumberFormat('en', {
  notation: 'compact'
}).format(12500);
// → 12.5K

Это встроенный инструмент, который заменяет moment.js, numeral.js и ручное форматирование. Любая валюта, любой язык, любая локаль.

📣 JS Ready | #совет

👩‍💻 Когда нужно быстро сравнить два фрагмента кода!

Partial Diff — расширение, которое позволяет мгновенно увидеть разницу между блоками кода. Работает с любыми файлами, от JS-функций до HTML-разметки. Идеально при рефакторинге, тестировании или ревью чужого кода. Минимум действий. Максимум наглядности.

📣 JS Ready | #vscode

📱 Функция, которая запускается сама!

Иногда нужно выполнить код сразу, но не засорять глобальную область:

function init() {
  console.log('Init logic...');
}
init();

Здесь всё работает, но init остаётся в памяти и доступна извне.

Решение — IIFE. Функция создаётся и вызывается сразу:

(function () {
  console.log('This runs immediately!');
})();

Можно использовать стрелочную форму:

(() => {
  console.log('Executed instantly!');
})();

Всё, что внутри, живёт только в этой области, никаких глобальных переменных и конфликтов имён:

(() => {
  const token = 'abc123';
})();
console.log(typeof token); // undefined

🔥 Выполняешь код сразу и не оставляешь мусора в глобальной зоне.

📣 JS Ready | #совет

Симулятор броска монеты на JavaScript!

Простая реализация подбрасывания монеты с небольшой задержкой — имитация реального ожидания результата.

Создаём массив сторон монеты:

const sides = ["Орёл 🦅", "Решка 💰"];

Функция выводит сообщение, ждёт 2 секунды и затем выбирает случайную сторону:

function flipCoin() {
  console.log("Бросаем монету...");
  
  setTimeout(() => {
    const result = sides[Math.floor(Math.random() * sides.length)];
    console.log(`Выпало: ${result}`);
  }, 2000);
}

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

flipCoin();

🔥 Отличный пример работы с асинхронностью, случайностью и имитацией задержки — базовые приёмы для CLI-анимаций и простых игр.

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

Определяем язык браузера!

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

Браузер хранит языковые настройки в объекте navigator:

const userLang = navigator.language;
console.log(`Язык браузера: ${userLang}`); // например: "en-US"

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

const langCode = userLang.split('-')[0].toLowerCase();
console.log(`Код языка: ${langCode}`); // "en"

Для более точной адаптации лучше учитывать весь список предпочтений пользователя:

const preferred = navigator.languages?.length
  ? navigator.languages
  : [navigator.language || 'en'];
console.log('Приоритет языков:', preferred); // ["en-US", "ru", "de"]

Чтобы гарантировать корректные коды локалей, можно нормализовать их по стандарту BCP-47:

const locales = Intl.getCanonicalLocales(preferred);
console.log('Нормализованные локали:', locales)

🔥 Такой подход лежит в основе автоматического выбора локали, подбора перевода интерфейса и настройки форматов дат и чисел.

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

📱 Реализация таймаута для Promise без внешних библиотек!

Иногда fetch() или любой промис может зависнуть, а код просто ждёт.

Promise.race(), как вариант решения: запускает несколько промисов и возвращает результат первого завершившегося:

const withTimeout = (ms, task) =>
  Promise.race([
    task,
    new Promise((_, reject) =>
      setTimeout(() => reject(new Error('Timeout')), ms)
    )
  ]);

Теперь можно ограничить жизнь любого промиса:

await withTimeout(3000, fetch('/api/data'));

Если запрос не успеет за 3 секунды, вылетит Error('Timeout'), и код не будет висеть.

Также можно добавить отмену при таймауте через AbortController:

const fetchWithTimeout = (url, ms) => {
  const controller = new AbortController();
  const timer = setTimeout(() => controller.abort(), ms);
  return fetch(url, { signal: controller.signal })
    .finally(() => clearTimeout(timer));
};

🔥 Таймауты и отмены — это то, что делает код надёжным.

📣 JS Ready | #совет