💅 Полезная статья попалась на Хабре: «Что такое API? Простыми словами для начинающих»!

В этой статье:
• Простым языком объясняется, что такое API и зачем он нужен в современных приложениях;
• На примере маркетплейса показывается, как программы обмениваются данными между собой;
• Разбирается разница между UI, frontend, backend и API;
• Показывается, как работают endpoint’ы, JSON и HTTP-запросы;

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

📣 JS Ready | #статья

Шпаргалка по циклам в JavaScript!

Например, for подходит для ситуаций, когда заранее известно количество итераций, а for...of является способом перебора значений массивов, строк и других итерируемых объектов.

На картинке основные конструкции циклов: классический for, циклы с предварительной и постусловной проверкой while и do...while, перебор коллекций через for...of и for...in, метод массива forEach(), управление выполнением, а также примеры вложенных циклов.

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

📣 JS Ready | #ресурс

Разбираем, как сделать функцию ограничения значения в диапазоне!

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

Обычно такие проверки пишут через несколько if, но одинаковая логика быстро начинает повторяться. Для таких задач удобно использовать небольшой паттерн clamp() — он оставляет значение внутри заданного диапазона.

Создаём функцию clamp

function clamp(value, min, max) {
  return Math.min(
    Math.max(value, min),
    max
  );
}

clamp() принимает три значения: само число, минимальную и максимальную границу.

Если значение меньше min, вернётся минимальная граница. Если больше max — максимальная. Во всех остальных случаях вернётся исходное значение. Проверяем работу функции

console.log(clamp(150, 0, 100));
// 100

console.log(clamp(-20, 0, 100));
// 0

console.log(clamp(50, 0, 100));
// 50

В первом случае значение превышает максимум, поэтому результат становится 100. Во втором значение ниже минимума и заменяется на 0. Третий вариант уже находится внутри диапазона и остаётся без изменений.

Ограничиваем прогресс загрузки

const serverProgress = 135;

const progress = clamp(
  serverProgress,
  0,
  100
);

console.log(progress);
// 100

Даже если данные пришли с ошибкой и сервер вернул значение больше 100, в интерфейс попадёт корректный процент. Такой подход часто используют перед отображением прогресса, размеров, процентов или других числовых параметров.

Ограничиваем пользовательский ввод

const userLimit = Number(input.value);

const limit = clamp(
  userLimit,
  10,
  100
);

fetch(`/api/items?limit=${limit}`);

Например, пользователь может ввести 10000 или отрицательное число. Перед отправкой запроса значение приводится к допустимому диапазону:

10 <= limit <= 100

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

Ограничиваем координаты элемента

const x = clamp(
  mouseX,
  0,
  containerWidth
);

const y = clamp(
  mouseY,
  0,
  containerHeight
);

Такой вариант полезен для drag-and-drop, игровых механик или любых интерфейсов, где объект не должен выходить за пределы контейнера. Вместо постоянных проверок границ используется одна универсальная функция.

Добавляем проверку некорректного диапазона

function clamp(value, min, max) {
  if (min > max) {
    throw new Error(
      "min cannot be greater than max"
    );
  }

  return Math.min(
    Math.max(value, min),
    max
  );
}

Если перепутать границы:

clamp(50, 100, 0);

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

🔥 clamp() — небольшая функция, но она хорошо подходит для большого количества задач. Вместо повторяющихся условий с if появляется единый способ работы с диапазонами, который проще поддерживать и использовать в разных частях приложения.

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

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

Например, после ввода URL браузер выполняет цепочку операций: разрешение DNS, установка HTTPS-соединения, отправка HTTP-запроса, получение ресурсов и запуск механизма рендеринга.

На картинке — полный жизненный цикл обработки страницы: от сетевого взаимодействия до построения DOM/CSSOM, выполнения JavaScript Engine и формирования итогового интерфейса.

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

📣 JS Ready | #ресурс

Temporal API — замена Date в JavaScript!

Date существует в JavaScript с первых версий языка и до сих пор используется повсеместно, но у него есть несколько архитектурных проблем: изменяемость объектов, сложная работа с часовыми поясами и неоднозначное поведение при преобразовании дат.

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

Создадим объект календарной даты без привязки к времени:

const birthday = Temporal.PlainDate.from(
  "1995-08-15"
);

console.log(birthday);
// 1995-08-15

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

Работа с датами становится более очевидной:

const nextWeek = birthday.add({
  days: 7
});

console.log(nextWeek);
// 1995-08-22

В отличие от Date, объекты Temporal являются иммутабельными: методы не изменяют исходное значение, а возвращают новый объект.

Для точного момента времени используется другой тип:

const now = Temporal.Now.instant();

console.log(now);
// 2026-07-15T12:30:45.123Z

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

Часовые пояса теперь являются отдельной частью модели:

const zoned = now.toZonedDateTimeISO(
  "Europe/Warsaw"
);

console.log(zoned);

Вместо ручных вычислений смещений Temporal явно связывает момент времени с конкретной временной зоной.

Можно безопасно получать локальные компоненты даты:

console.log(zoned.hour);
console.log(zoned.day);
console.log(zoned.month);

Это устраняет большое количество ошибок, которые возникают при использовании getHours(), getDate() и ручной работе с UTC.

Ещё один практический сценарий — сравнение дат:

const start = Temporal.PlainDate.from(
  "2026-01-01"
);

const end = Temporal.PlainDate.from(
  "2026-12-31"
);

Вместо сложных преобразований в миллисекунды используется понятное сравнение:

console.log(
  Temporal.PlainDate.compare(start, end)
);
// -1

Temporal разделяет разные сущности времени, поэтому код становится понятнее: дата, время, момент и часовой пояс больше не смешиваются в одном объекте.

🔥 Temporal — это переработанная модель работы со временем, которая решает основные проблемы старого Date: мутабельность, часовые пояса и сложные преобразования.

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

Получаем размер данных в байтах без ручных подсчётов!

Когда нужно узнать размер строки или подготовленных данных, многие используют:

str.length

Но length считает количество UTF-16 кодовых единиц, а не размер данных в байтах.

В JavaScript есть нативный способ — Blob.

const size = new Blob([data]).size;

Он показывает размер содержимого Blob в байтах.

Например:

new Blob(['😀']).size;
// 4

'😀'.length;
// 2

Emoji занимает 2 UTF-16 code units, но в Blob превращается в 4 байта UTF-8.

Полезно перед загрузкой файлов, отправкой данных через API, проверкой лимитов и работой с бинарными данными.

Для файлов ещё проще:

file.size;

🔥 Blob.size — простой нативный способ узнать размер данных в байтах без сторонних библиотек.

📣 JS Ready | #совет

📂 Напоминалка для работы с авторизацией в Web-приложениях!

Например, cookies позволяют браузеру хранить небольшие данные на стороне клиента, а sessions переносят хранение пользовательского состояния на сервер, оставляя у клиента только идентификатор сессии.

На картинке — основное отличие между Cookies и Sessions, которое помогает понять, где хранить данные пользователя при разработке систем аутентификации.

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

📣 JS Ready | #ресурс

📂 Напоминалка по работе HTTPS!

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

На картинке — основные этапы работы HTTPS: TCP handshake, проверка сертификата через Certificate Authority, обмен ключами, создание защищённой сессии, симметричное шифрование и безопасная передача данных между клиентом и сервером.

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

📣 JS Ready | #ресурс

Цифровая подпись данных через Web Crypto API!

Цифровая подпись позволяет проверить не только целостность данных, но и подтвердить, что они были созданы владельцем определённого ключа. В браузере для этого можно использовать встроенный Web Crypto API через crypto.subtle, который поддерживает генерацию ключей, создание подписей и их проверку.

Создадим пару RSA-ключей с алгоритмом RSA-PSS и SHA-256. Приватный ключ будет использоваться для создания подписи, а публичный — для проверки её корректности.

const keys = await crypto.subtle.generateKey(
  {
    name: "RSA-PSS",
    modulusLength: 2048,
    publicExponent: new Uint8Array([1, 0, 1]),
    hash: "SHA-256"
  },
  true,
  ["sign", "verify"]
);

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

Перед созданием подписи данные необходимо преобразовать в бинарный формат, так как криптографические операции работают с байтами, а не со строками.

const data = new TextEncoder()
  .encode("order=123");

Теперь создадим цифровую подпись для подготовленных данных с использованием приватного ключа. Результат можно сохранить вместе с данными и использовать позже для проверки подлинности.

const signature = await crypto.subtle.sign(
  {
    name: "RSA-PSS",
    saltLength: 32
  },
  keys.privateKey,
  data
);

Цифровая подпись не скрывает содержимое сообщения и не заменяет шифрование. Она подтверждает, что данные были подписаны соответствующим приватным ключом и не были изменены после создания подписи.

Для проверки используется публичный ключ, исходные данные и полученная подпись. Метод verify() возвращает true, если подпись соответствует переданному содержимому.

const valid = await crypto.subtle.verify(
  {
    name: "RSA-PSS",
    saltLength: 32
  },
  keys.publicKey,
  signature,
  data
);

console.log(valid);
// true

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

const changedData = new TextEncoder()
  .encode("order=999");

const changed = await crypto.subtle.verify(
  {
    name: "RSA-PSS",
    saltLength: 32
  },
  keys.publicKey,
  signature,
  changedData
);

console.log(changed);
// false

Важно понимать разницу между цифровой подписью и шифрованием. Шифрование защищает конфиденциальность данных, а подпись подтверждает их происхождение и целостность. Такие механизмы используются при проверке обновлений программного обеспечения, обмене данными между сервисами, защите конфигураций, API-аутентификации и электронном документообороте.

🔥 crypto.subtle показывает, что Web Crypto API — это полноценный криптографический инструмент в браузере, который позволяет работать не только с хэшированием, но и с ключами, цифровыми подписями и проверкой подлинности данных.

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

📂 Напоминалка по парадигмам программирования!

Например, Imperative Programming позволяет описывать код пошагово через команды и изменение состояния, Functional Programming строит логику через функции и работу с данными, а OOP организует код вокруг объектов, классов и их взаимодействия.

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

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

📣 JS Ready | #ресурс

Копируем объект вместе с его логикой, а не только значениями!

Многие используют spread или Object.assign() для копирования объектов:

const copy = { ...user };

Но такой способ переносит только значения свойств. Если у объекта есть getter, setter или специальные настройки свойства — они будут потеряны.

Для полного копирования структуры объекта есть Object.getOwnPropertyDescriptors().

const descriptors = Object.getOwnPropertyDescriptors(obj);

Он возвращает описание каждого свойства:

{
  value: 'Alex',
  writable: true,
  enumerable: true,
  configurable: true
}

Теперь можно создать копию, сохранив оригинальное поведение:

const clone = Object.defineProperties(
  {},
  Object.getOwnPropertyDescriptors(obj)
);

Например, getter останется getter-ом:

const user = {
  first: 'Alex',

  get name() {
    return this.first;
  }
};

После копирования:

clone.name;
// Alex

а не просто сохранённое значение.

🔥 Object.getOwnPropertyDescriptors() полезен при создании библиотек, расширении объектов, работе с классами и когда важно сохранить не только данные, но и поведение объекта.

📣 JS Ready | #совет

🤔 Наткнулся на интересную статью на Хабре: «Как я написал “Обратную змейку” на чистом Canvas»!

В этой статье:
• Показывается, как классическую игру «Змейка» можно полностью переосмыслить, поменяв роли игрока и противников;
• Разбирается создание игры на чистом JavaScript и Canvas без фреймворков, сборщиков и готовых игровых движков;
• Подробно описывается разработка игровой логики, ИИ змей, адаптация под мобильные устройства и балансировка сложности.

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

📣 JS Ready | #статья

Разбираем RegExp.escape() — стандартный способ экранирования динамических шаблонов!

При построении регулярных выражений из динамических данных долгое время приходилось писать собственные функции экранирования или использовать сторонние утилиты. Такие реализации редко учитывали все особенности синтаксиса регулярных выражений и часто отличались друг от друга.

RegExp.escape() стандартизирует эту задачу. Метод принимает строку и возвращает строку, которую можно безопасно использовать как буквальный фрагмент шаблона регулярного выражения.

Создадим регулярное выражение из динамического значения:

const filename = "app.config.js";

const regex = new RegExp(
  `^${RegExp.escape(filename)}$`
);

console.log(
  regex.test("app.config.js")
);
// true

В этом примере экранируется только динамическая часть шаблона. Остальная логика (^ и $) остаётся полноценным регулярным выражением.

Такой подход особенно полезен, когда шаблон состоит из статической и динамической частей:

const extension = "tar.gz";

const regex = new RegExp(
  `\\.${RegExp.escape(extension)}$`
);

console.log(
  regex.test("archive.tar.gz")
);
// true

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

Ещё один распространённый сценарий — поиск по произвольному пользовательскому запросу:

const query = "[admin]";
const text = "Users: [admin], [guest]";

const regex = new RegExp(
  RegExp.escape(query),
  "gi"
);

const matches = text.match(regex);

console.log(matches);
// ["[admin]"]

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

Важно понимать: RegExp.escape() предназначен для экранирования обычного текста. Метод принимает только строки — если передать объект RegExp, будет выброшен TypeError. Также не стоит применять его к фрагментам, которые должны остаться частью регулярного выражения.

🔥 RegExp.escape() предоставляет стандартный и корректный способ экранирования динамических фрагментов регулярных выражений. В современных JavaScript-окружениях собственные утилиты для этой задачи обычно больше не нужны. Если же требуется поддержка старых браузеров или версий Node.js, стоит использовать полифил.

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

LearnJS — русскоязычный учебник, от базовых понятий до продвинутых тем чтобы освоить JS!

Удобные объяснения, примеры кода, интерактивные задания помогут прокачать навыки как новичкам, так и опытным разработчикам.

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

📣 JS Ready | #сайт

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

📌 Ссылочка: jex.im/regulex

📣 JS Ready | #сайт