📂 Напоминалка по URL, URI и URN в веб-разработке!

Например, URL (Uniform Resource Locator) используется для указания адреса ресурса и способа его получения (https://example.com/page), а URI (Uniform Resource Identifier) является общим идентификатором ресурса, который включает в себя URL и URN.

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

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

📣 JS Ready | #ресурс

URLPattern — нативное сопоставление URL без ручных регулярных выражений!

Во многих проектах приходится разбирать URL: определять маршруты, извлекать параметры, проверять соответствие шаблону. Чаще всего для этого используют регулярные выражения или вручную разбирают строку, хотя современные браузеры предоставляют для этого встроенный API — URLPattern.

Создадим шаблон маршрута для страницы пользователя:

const pattern = new URLPattern({
  pathname: "/users/:id"
});

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

Проверим, соответствует ли URL заданному шаблону:

const result = pattern.exec(
  "https://site.com/users/42"
);

console.log(!!result); // true

Если совпадение найдено, exec() возвращает объект с подробной информацией о результате. Если маршрут не подходит — вернётся null.

Получим параметр маршрута:

if (result) {
  console.log(
    result.pathname.groups.id
  );

  // "42"
}

Все именованные параметры автоматически попадают в объект groups. Больше не нужно самостоятельно искать совпадения, работать с индексами или писать регулярные выражения.

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

Например, можно сразу описать шаблон для версии API:

const api = new URLPattern({
  hostname: "api.example.com",
  pathname: "/v:version/users/:id"
});

Теперь один шаблон одновременно проверяет хост и извлекает несколько параметров из пути.

Получим результат сопоставления:

const match = api.exec(
  "https://api.example.com/v2/users/15"
);

console.log(match.pathname.groups);

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

// {
//   version: "2",
//   id: "15"
// }

URLPattern поддерживается современными браузерами, но если нужна совместимость со старыми версиями, заранее проверьте наличие API.

🔥 URLPattern — позволяет отказаться от значительной части ручного разбора URL и сделать код сопоставления маршрутов заметно чище.

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

Крутая статья на Хабре: «Платформа плагинов в Трекере, или Как мы пустили сторонний код в продукт с 600 000 пользователей»!

В этой статье:
• Рассказывается, зачем Яндекс Трекеру понадобилась собственная платформа плагинов и как она позволяет расширять продукт без изменений в его ядре;
• Разбирается архитектура безопасного запуска стороннего JavaScript: изоляция через iframe, Bridge на postMessage и система разрешений;
• Показывается, как плагины работают с API и внешними сервисами, не получая прямого доступа к cookie, токенам и лишним данным.

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

📣 JS Ready | #статья

📂 Напоминалка по HTTP-кодам ответов для разработчиков!

Например, HTTP Status Codes являются стандартом взаимодействия между клиентом и сервером, позволяя определить результат выполнения запроса. В JavaScript-разработке они используются при работе с fetch(), axios, REST API и backend-сервисами для корректной обработки успешных ответов, ошибок клиента и серверных сбоев.

На картинке — основные HTTP-коды (2xx, 3xx, 4xx, 5xx), которые необходимо знать каждому frontend и backend-разработчику при создании и интеграции современных веб-приложений.

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

📣 JS Ready | #ресурс

📂 Напоминалка для разработчиков: REST vs GraphQL!

Например, REST использует отдельные API-эндпоинты для получения ресурсов (GET /articles/123), а GraphQL позволяет клиенту самому выбирать необходимые поля через единый API-запрос.

На картинке — сравнение двух популярных подходов к созданию API: REST с фиксированной структурой ответов, HTTP-кэшированием и версионированием, а также GraphQL с Gateway, резолверами и агрегацией данных из нескольких микросервисов.

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

📣 JS Ready | #ресурс

👍 Любопытный разбор на Хабре: «Плоть слаба: как я писал свой Wine для браузера»!

В этой статье:
• Разбирается создание собственного аналога Wine на TypeScript, который запускает старые Windows-игры прямо в браузере;
• Показывается архитектура High-Level Emulation: x86-код выполняется через v86, а WinAPI, DirectX, звук и файловая система перехватываются и переводятся на WebGPU, Web Audio и OPFS;
• На примерах Re-Volt, Unreal Tournament и Harry Potter разбираются реальные проблемы эмуляции — от загрузки DLL и ABI до графики, многопоточности, SEH и неожиданных багов старого софта.

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

📣 JS Ready | #статья

Унифицируйте sync и async ошибки в один поток!

Частая проблема: функция может упасть либо сразу, либо внутри Promise.

function parse(data) {
  return JSON.parse(data); // sync ошибка
}

Обычно приходится отдельно думать про оба случая.

Promise.try() превращает любой вызов в Promise:

const result = await Promise.try(() => {
  return JSON.parse(input);
});

Теперь одинаково работают и обычные ошибки, и async-код:

await Promise.try(async () => {
  const data = await fetch('/api');
  return data.json();
});

🔥 Удобно для обёрток над чужими функциями, плагинов и API, где заранее неизвестно — вернётся значение или Promise.

📣 JS Ready | #совет

📂 Напоминалка по OSI модели!

Например, при открытии веб-сайта данные проходят через несколько уровней сетевого стека: от прикладных протоколов HTTP/DNS до физической передачи битов через Ethernet или Wi-Fi.

На картинке — как работает модель OSI, процесс инкапсуляции и деинкапсуляции данных, роль каждого уровня, а также какие служебные данные добавляются при передаче: HTTP-заголовки, TCP-сегменты, IP-пакеты и MAC-кадры.

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

📣 JS Ready | #ресурс

Читаем и меняем свойства объектов на уровне JavaScript-движка!

Многие знают, что объект хранит ключи и значения:

const user = {
  name: 'Alex'
};

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

Посмотреть эти параметры можно через:

Object.getOwnPropertyDescriptor(user, 'name');

Результат:

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

Например, можно сделать свойство только для чтения:

Object.defineProperty(user, 'id', {
  value: 123,
  writable: false
});

Теперь изменить его нельзя:

user.id = 456;

console.log(user.id);
// 123

Эти же механизмы используют внутри себя библиотеки, фреймворки и сам JavaScript для создания getter/setter и скрытых свойств.

Object.defineProperty(user, 'fullName', {
  get() {
    return `${this.name} Smith`;
  }
});

Теперь:

user.fullName;
// Alex Smith

🔥 Object.defineProperty() и дескрипторы позволяют управлять поведением объектов, а не просто хранить данные.

📣 JS Ready | #совет

📂 Шпаргалка по HTTP-методам для разработчика!

Например, GET получает данные, POST создаёт новый ресурс, PUT обновляет его целиком, а PATCH — только необходимые поля.

На картинке собраны 9 основных HTTP-методов с примерами запросов и ответов — пригодится при разработке API и работе с fetch, Axios или backend.

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

📣 JS Ready | #ресурс

Не теряйте настоящую причину ошибки при создании новой!

При обработке ошибок часто хочется добавить контекст. Но обычный throw new Error(...) скрывает исходную ошибку, из-за чего отладка становится сложнее.

try {  
   return await fetchUser(id);
} catch (error) {  
   throw new Error(`Не удалось загрузить user ${id}`);
}

В JavaScript у Error есть опция cause, которая позволяет сохранить оригинальную ошибку внутри новой.

try {  
   return await fetchUser(id);
} catch (error) {  
   throw new Error(`Не удалось загрузить user ${id}`, {    
      cause: error  
});
}

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

try {  
  await loadUser(42);
} catch (error) {  
  console.log(error.message);  
  console.log(error.cause);
}

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

📣 JS Ready | #совет

📂 Напоминалка про идемпотентность!

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

На картинке — 6 основных случаев, где идемпотентность особенно важна: REST API, платежи, заказы, операции с базой данных, управление аккаунтами и распределённые сообщения.

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

📣 JS Ready | #ресурс

📂 Шпаргалка по основным возможностям JavaScript!

На ней собраны основные конструкции языка и часто используемые методы: массивы, строки и объекты, функции, DOM и события, Promise, async/await, JSON, destructuring, spread/rest и работа с localStorage.

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

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

📣 JS Ready | #ресурс