Форматируем дату по приоритетной локали пользователя!

Частая задача: выводить дату в понятном формате без ручного указания региона. Браузер предоставляет список предпочтительных локалей, а Intl.DateTimeFormat форматирует дату на основе данных CLDR.

Базовый вывод даты (используем первую предпочтительную локаль или системную):

const now = new Date();
const locale = navigator.languages?.[0] || navigator.language;
const formatter = new Intl.DateTimeFormat(locale);
console.log(formatter.format(now));
// Примеры: 12/24/2025 или 24.12.2025

Более читаемый формат в современных браузерах:

const pretty = new Intl.DateTimeFormat(locale, {
  dateStyle: "medium",
  timeStyle: "short"
});
console.log(pretty.format(now));
// Примеры: Dec 24, 2025, 14:30 или 24 дек. 2025 г., 14:30

Собираем собственный формат даты (жёсткий порядок и разделители задаём сами):

const parts = new Intl.DateTimeFormat(locale, { day:"2-digit", month:"2-digit", year:"numeric" })
  .formatToParts(now)
  .filter(p => p.type !== "literal");

const obj = {};
for (const p of parts) obj[p.type] = p.value;

console.log(`${obj.day}.${obj.month}.${obj.year}`);
// Пример: 24.12.2025

🔥 Важно: locale влияет только на формат отображения. Часовой пояс определяется окружением браузера, при необходимости его можно зафиксировать через опцию timeZone (IANA, например UTC).

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

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

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

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

📣 Code Ready | #ресурс

Быстро приводим значение к boolean — без лишних проверок!

В JS логические значения — это не только true и false.
Любое значение в условии считается либо truthy, либо falsy.

По умолчанию falsy всего несколько значений:

false
0
''
null
undefined
NaN

Всё остальное — truthy, даже пустые объекты и массивы.

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

Одно ! инвертирует значение:

!0    // true
!1    // false

Два ! подряд делают именно то, что нужно — приводят значение к true или false:

!!0        // false
!!1        // true
!!'text'   // true
!!null     // false

Это часто удобнее и короче, чем Boolean(value):

Boolean(value); // то же самое, но длиннее

🔥 Поэтому, !!value — быстрый и наглядный способ получить boolean в коде.

📣 Code Ready | #совет

📂 Напоминалка для работы с Map!

Map — это удобная структура данных для хранения пар ключ - значение, где ключом может быть что угодно, а порядок элементов сохраняется.

На картинке — часто используемые методы Map: от добавления и получения значений до перебора данных.

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

📣 Code Ready | #ресурс

❤️ Human Who Codes — блог Николаса Закаса, одного из самых влиятельных программистов в мире JS!

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

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

📣 Code Ready | #ресурсы

Каждый год пишу итоги, не буду отказываться и сейчас)

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

На 2026 год главная цель это набрать 50000 подписчиков. Поэтому желаю каждому чтобы новый год был еще лучше!

С наступающим! 🎄

👩‍💻 Быстрый дебаг CSS-границ без инспектора!

Когда вёрстка “плывёт”, удобно временно включить универсальную подсветку границ, чтобы сразу увидеть проблемные блоки и их вложенность.

Вместо того чтобы вручную писать для каждого элемента border: 1px solid red, используйте CSS-переменную и outline (он не влияет на layout):

:root {
  --debug: 1px dashed red;
}

Теперь включаем дебаг в одну строку для любого элемента:

* {
  outline: var(--debug);
}

outline не сдвигает элементы, не ломает размеры и не создаёт переполнений, поэтому дебаг абсолютно точный.

Хочешь быстро отключить? Просто меняем переменную:

:root {
  --debug: none;
}

🔥 Это даёт мгновенный контроль над debug-режимом, без удаления правил по всему файлу.

📣 Code Ready | #совет

Получаем данные случайного пользователя!

RandomUser API удобен для фронтенда: один запрос — и есть JSON с реалистичным профилем. В нормальном ответе приходит объект { results: [...] }, где results — массив профилей.

Нам обычно нужен первый пользователь:

async function getRandomUser() {
  const res = await fetch("https://randomuser.me/api/");
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  const { results, error } = await res.json();
  if (error) throw new Error(error);
  if (!results?.length) throw new Error("No results");
  return results[0];
}

Достаём поля через деструктуризацию. Для UI: picture.medium — аватар среднего размера, thumbnail — для списков:

getRandomUser().then(({ name, email, location, picture }) => {
  const fullName = `${name.first} ${name.last}`;
  console.log(`Имя: ${fullName} | Страна: ${location.country}`);
  console.log(`Аватар (medium): ${picture.medium} | Email: ${email}`);
}).catch(console.error);

Когда нужен набор моков — используем ?results=N. API поддерживает крупные батч-запросы (до 5000 пользователей за один вызов), что эффективнее, чем множество одиночных запросов:

async function getRandomUsers(count = 5) {
  const res = await fetch(`https://randomuser.me/api/?results=${count}`);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  const { results, error } = await res.json();
  if (error) throw new Error(error);
  if (!results?.length) throw new Error("No results");
  return results;
}

getRandomUsers(3).then(list => console.log(list));

🔥 При массовой загрузке учитывайте rate-limit и размер ответа. Кэшируйте профили, если они нужны повторно в рамках сессии.

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

💅 Нашёл интересную и полезную статью на Хабре: «Заменяем JS обычным HTML»!

В этой статье вы:
• Узнаете, как заменить привычные JavaScript-фичи html/css;
• Реализуете интерактивные элементы (аккордеоны, раскрывающиеся блоки);
• Научитесь строить UI-компоненты вроде автодополнения, модальных окон и popover-меню через современные html-атрибуты;
• Получите примеры, которые позволяют снижать зависимость от JavaScript там, где возможно.

🔊 Продолжайте читать на Habr!

📣 Code Ready | #статья