📂 Напоминалка для разработчиков: 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 | #ресурс

😎 Необычная статья попалась на Хабре: «Как сделать игру для ZX Spectrum в 2026 (и зачем)»!

В этой статье:
• Узнаете, как сегодня создать полноценную игру для ZX Spectrum с помощью Dizzy SE;
• Разберёте создание пиксельной графики, карты, спрайтов, игровой логики и диалогов;
• Посмотрите, как добавить музыку и собрать всё в работающую ретро-игру с ограничениями 8-битного компьютера.

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

📣 JS Ready | #статья

Используйте optional chaining не только для чтения — он умеет больше!

Большинство знают ?. только как замену длинным проверкам:

if (user && user.profile) {
  console.log(user.profile.name);
}

Но у optional chaining есть менее очевидное применение — безопасный вызов методов и функций.

Например, раньше часто писали:

if (callback) {
  callback(data);
}

Теперь:

callback?.(data);

Если функции нет — ничего не произойдет.

То же самое работает с методами:

const result = api.getUser?.(id);

И с массивами:

users.find?.(u => u.id === 10);

Еще один полезный случай — безопасный доступ к динамическим ключам:

const value = config.handlers?.[eventName];

Без дополнительных проверок:

if (
  config &&
  config.handlers &&
  config.handlers[eventName]
) {
  ...
}

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

📣 JS Ready | #совет