👩‍💻 Нужно быстро обернуть текст или элемент в HTML-тег?

Htmltagwrap — позволяет выделить любой фрагмент и за секунду обернуть его в нужный тег: div, span, section и любой другой, без ручного написания. Особенно удобно при верстке, работе с JSX и быстром редактировании разметки.

📣 JS Ready | #vscode

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

Например, Load Balancer распределяет запросы между несколькими серверами, а API Gateway управляет доступом к API, маршрутизацией и ограничением запросов.

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

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

📣 JS Ready | #ресурс

Красивый диапазон дат без ручной склейки!

Очень частая задача в интерфейсе: показать период акции, бронь, событие или дедлайн.

Обычно начинают собирать строку руками:

`${start} - ${end}`

Но так быстро появляются проблемы с локалями, месяцами и повторяющимися частями даты.

В JS есть нативный метод formatRange() у Intl.DateTimeFormat.

fmt.formatRange(startDate, endDate)

Он сам форматирует диапазон по правилам выбранной локали.

fmt.formatRange(
  new Date('2026-03-10'),
  new Date('2026-03-14')
);

Если даты в одном месяце, результат будет компактным.

// 10–14 марта

А если диапазон пересекает месяцы — формат тоже останется корректным.

fmt.formatRange(
  new Date('2026-03-30'),
  new Date('2026-04-02')
);
// 30 марта – 2 апреля

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

📣 JS Ready | #совет

Разбираем разницу между Promise.all() и Promise.allSettled()!

Отличия между ними проявляются в момент ошибки. Если использовать Promise.all(), то достаточно одного rejected-промиса, чтобы весь результат тоже стал rejected:

await Promise.all([
  fetchUser(),
  fetchPosts(),
  fetchComments()
]);

При этом остальные операции не отменяются. Запросы, таймеры и прочая асинхронщина продолжают выполняться. Просто Promise.all() больше не ждёт общий успешный результат.

Когда нужен результат каждой операции независимо от исхода, есть Promise.allSettled():

const results = await Promise.allSettled([
  fetchUser(),
  fetchPosts(),
  fetchComments()
]);

На выходе получится массив объектов со статусом каждого промиса:

[
  { status: "fulfilled", value: {...} },
  { status: "rejected", reason: Error(...) },
  { status: "fulfilled", value: [...] }
]

Это удобно для независимых задач. Например, страница загружает профиль пользователя, уведомления и рекомендации. Если рекомендации упали с ошибкой, профиль и уведомления всё равно можно показать. Или пакетная обработка:

const results = await Promise.allSettled(
  users.map(user => sendEmail(user))
);

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

🔥 Promise.all() отвечает на вопрос: «Все операции завершились успешно?». Promise.allSettled() отвечает на другой вопрос: «Чем закончилась каждая операция?». Из-за этого они не заменяют друг друга и используются для разных сценариев.

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

💅 Frontend Stuff — коллекция полезных ресурсов для frontend-разработчиков!

На сайте собрана большая база материалов для JavaScript-разработчиков: статьи, библиотеки, фреймворки, инструменты, полезные сервисы и обучающие ресурсы. От базовых инструментов до React, Vue, Node.js и др. Отличный ресурс для веб-разработчиков, которые хотят ускорить работу или найти новые инструменты.

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

📣 JS Ready | #сайт

📂 Напоминалка по деструктуризации объектов!

При деструктуризации можно задавать значения по умолчанию — они применяются только когда значение свойства равно undefined (включая случай, когда свойства нет в объекте).

На картинке показано, как работает извлечение значений из объекта person, как подставляются fallback-значения при отсутствии данных, а также разбор кейсов с undefined, null и другими типами значений.

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

📣 JS Ready | #ресурс

Сохраняем причину ошибки без потери контекста!

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

Раньше приходилось вручную дописывать сообщение:

throw new Error('Config loading failed: ' + err.message);

Так стек и тип исходной ошибки легко теряются.

В JavaScript есть нативный Error.cause.

throw new Error('Не удалось загрузить конфиг', { cause: err });

Теперь верхняя ошибка объясняет контекст, а cause хранит настоящую причину.

error.cause

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

try {
  JSON.parse('{bad json}');
} catch (err) {
  throw new Error('Config parse failed', { cause: err });
}

🔥 Error.cause помогает строить цепочки ошибок без склейки строк, потери stack trace и хаоса в логах.

📣 JS Ready | #совет

🐱 8 шпаргалок для веб-разработчика — полезная подборка по HTML, CSS, JavaScript, React и Git!

На странице собрана крутая подборка из 8 полезных шпаргалок для веб-разработчиков. Здесь справочники по HTML, CSS, Grid Layout, Flexbox, JavaScript, React и Git с примерами кода, схемами и наглядными объяснениями. Полезно для frontend-разработчиков: можно быстро освежить знания по вёрстке, JavaScript и др. инструментам.

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

📣 JS Ready | #сайт

Object.assign и spread: почему не копируются геттеры!

Object.assign и spread часто используют как быстрый способ скопировать объект, и на простых структурах всё действительно выглядит как прямое копирование значений.

const user = {
  name: "Анна"
};

const copy = Object.assign({}, user);

console.log(copy);

Пока объект состоит только из обычных полей, никакой разницы не видно.

Проблема появляется, когда в объекте есть геттеры.

const user = {
  firstName: "Анна",
  lastName: "Иванова",

  get fullName() {
    console.log("getter called");
    return `${this.firstName} ${this.lastName}`;
  }
};

fullName здесь не хранит значение. Это вычисляемое свойство, и оно выполняется в момент чтения.

Когда вызывается Object.assign, он проходит по собственным перечисляемым свойствам и читает каждое через [[Get]]. В этот момент геттер реально срабатывает.

const copy = Object.assign({}, user);

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

console.log(Object.getOwnPropertyDescriptor(copy, "fullName"));

В копии уже нет никакого геттера, там обычное значение, полученное в момент копирования.

{
  value: "Анна Иванова",
  writable: true,
  enumerable: true,
  configurable: true
}

В оригинальном объекте всё иначе — там сохраняется сам accessor, а не результат его выполнения.

console.log(Object.getOwnPropertyDescriptor(user, "fullName"));

{
  get: [Function],
  set: undefined,
  enumerable: true,
  configurable: true
}

spread работает ровно так же.

const copy = {
  ...user
};

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

Если нужно сохранить именно поведение объекта вместе с геттерами, используют копирование дескрипторов.

const copy = Object.defineProperties(
  {},
  Object.getOwnPropertyDescriptors(user)
);

В этом варианте ничего не вычисляется заранее — переносится описание свойств как есть. И Object.assign, и spread работают только с собственными перечисляемыми свойствами. Прототипные свойства в процесс не попадают.

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

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