👩‍💻 Стили пишутся прямо в React-компонентах.

vscode-styled-components — делает работу со styled-components намного удобнее: появляются подсказки CSS, подсветка цветов, автодополнение свойств и форматирование прямо внутри JS/TS-файлов. Всё работает почти как в отдельном CSS-файле.

📣 JS Ready | #vscode

URL.canParse + URL API — проверка URL без try/catch и regex!

Частая задача в JS: проверить URL перед fetch, редиректом, сохранением в БД, проксированием или обработкой пользовательского ввода.

Обычно многие делают так:

function isValid(url) {
  try {
    new URL(url);

    return true;
  } catch {
    return false;
  }
}

Способ рабочий, но со временем такие проверки начинают размножаться по проекту в десятках мест. Минусы:— try/catch ради обычной проверки читается тяжеловато— многие потом начинают дописывать сверху regex— появляются разные реализации одной и той же логики.

Но в платформе есть нативный способ — URL.canParse().

URL.canParse("https://example.com");
// true

URL.canParse("not-a-url");
// false

Без исключений и без самописных проверок. Просто получаешь boolean.

Но тут есть важный момент, про который многие забывают — относительные URL. Например:

URL.canParse("/api/users");
// false

Это не ошибка метода. Просто относительный путь нельзя распарсить без base URL. Поэтому правильно так:

URL.canParse(
  "/api/users",
  "https://example.com"
);
// true

И потом этот же base используешь при создании URL:

const url = new URL(
  "/api/users",
  "https://example.com"
);

Это особенно полезно в SSR, middleware, proxy и серверных обработчиках, где часто работают именно с относительными путями.

Ещё хороший кейс — фильтрация пользовательского ввода.

const input = [
  "https://a.com",
  "ftp://b.com",
  "invalid"
];

const valid = input.filter(u =>
  URL.canParse(u)
);

Но тут есть нюанс, canParse() проверяет только то, что строка корректно парсится как URL с точки зрения WHATWG URL parser. Это не проверка безопасности и не проверка того, что URL подходит именно для вашего кейса.

Например ftp: или даже javascript: тоже могут успешно парситься. Поэтому для API, fetch и редиректов обычно дополнительно проверяют protocol:

function parseHttpUrl(u) {
  if (!URL.canParse(u)) {
    return null;
  }

  const url = new URL(u);

  return (
    url.protocol === "http:" ||
    url.protocol === "https:"
  )
    ? url
    : null;
}

А для редиректов и proxy этого тоже часто недостаточно — обычно дополнительно проверяют hostname/origin через allowlist.

Ещё один полезный момент — нормализация URL. Очень часто одинаковые ссылки приходят в разном виде:

https://example.com
https://example.com/

Через URL API это можно привести к одному формату:

function normalize(u) {
  if (!URL.canParse(u)) {
    return null;
  }

  return new URL(u).href;
}

normalize("https://example.com");
normalize("https://example.com/");

🔥 В итоге: если нужно проверить, разобрать или нормализовать URL — лучше сразу использовать стандартный URL API. Кода меньше, поведение предсказуемее и меньше шансов словить странные баги на парсинге.

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

💅 Ravesli JavaScript — курс по основам JS для начинающих!

Сайт охватывает как основы языка, так и более продвинутые темы. Здесь разбираются переменные, функции, объекты, массивы, DOM, события, асинхронность, работа с браузером и др. Материал подаётся в формате последовательных уроков с примерами кода и подробными объяснениями.

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

📣 JS Ready | #сайт

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

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

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

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

📣 JS Ready | #ресурс

Сортировка строк без ручных костылей!

Обычный sort() сортирует строки лексикографически, поэтому числа внутри строк идут не так, как ожидает пользователь.

['file2', 'file10', 'file1'].sort();
// ['file1', 'file10', 'file2']

Для более понятной сортировки в JS есть Intl.Collator.

const collator = new Intl.Collator('ru', {
  numeric: true
});

Опция numeric: true заставляет сравнивать числа внутри строк как числа, а не как символы.

['v2', 'v10', 'v1'].sort(collator.compare);
// ['v1', 'v2', 'v10']

А sensitivity: 'base' помогает не цепляться к регистру и мелким различиям при сравнении.

new Intl.Collator('ru', {
  sensitivity: 'base'
});

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

📣 JS Ready | #совет

❤️ Web Links — огромная подборка ресурсов по JavaScript и веб-разработке!

На сайте собрана большая коллекция полезных ссылок для разработчиков: учебники, документация, статьи, блоги, инструменты, библиотеки и сервисы по JavaScript, HTML, CSS, React, Node.js и другим технологиям веб-разработки. Всё удобно структурировано по категориям, что позволяет быстро находить нужные материалы для изучения или работы.

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

📣 JS Ready | #сайт

Object.hasOwn() — способ проверить, есть ли у объекта собственное свойство!

Чаще всего для этого используют hasOwnProperty():

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

console.log(user.hasOwnProperty("name")); // true

Способ рабочий, но есть один нюанс. hasOwnProperty — обычный метод объекта. Если он был переопределён, результат проверки уже может оказаться неожиданным.

const user = {
  name: "Анна",
  hasOwnProperty: () => false
};

console.log(user.hasOwnProperty("name")); // false

Именно поэтому долгое время надёжным вариантом считался вызов через прототип:

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

console.log(
  Object.prototype.hasOwnProperty.call(user, "name")
); // true

Такой код работает корректно независимо от содержимого объекта, но выглядит довольно громоздко. Сейчас для этой задачи есть отдельный метод:

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

console.log(
  Object.hasOwn(user, "name")
); // true

По сути это более удобная запись той же проверки. Особенно полезен Object.hasOwn() при работе с объектами без прототипа:

const cache = Object.create(null);

cache.users = [];

console.log(
  Object.hasOwn(cache, "users")
); // true

У таких объектов метода hasOwnProperty нет вовсе:

const cache = Object.create(null);

console.log(cache.hasOwnProperty);
// undefined

Ещё один пример — необходимость отличить собственные свойства от унаследованных:

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

console.log(
  Object.hasOwn(user, "toString")
); // false

Хотя доступ к toString есть, само свойство находится в прототипе.
По этой же причине Object.hasOwn() нередко используют внутри for...in, чтобы обрабатывать только собственные свойства объекта.

for (const key in data) {
  if (Object.hasOwn(data, key)) {
    console.log(key);
  }
}

🔥 Если нужно проверить наличие свойства именно у объекта, а не где-то в его прототипной цепочке, Object.hasOwn() сегодня является самым понятным и читаемым решением.

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

👩‍💻 Нужно быстро обернуть текст или элемент в 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 | #сайт