Отменяем fetch по таймауту!

Иногда fetch должен сам отмениться, если сервер думает слишком долго, без логики таймаута и Promise-обёрток.

const c = new AbortController();

Контроллер создаёт сигнал отмены, который понимает fetch.

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

setTimeout(() => c.abort(), 1000);

Через секунду запрос прервётся.

Передаём сигнал прямо в fetch и он станет отменяемым нативно:

await fetch(url, { signal: c.signal });

Если запрос отменится, промис упадёт с AbortError.

Проверяем интерактивно в консоли, как это выглядит при обрыве:

try {
  const c = new AbortController();
  setTimeout(() => c.abort(), 500);
  await fetch('https://httpbin.org/delay/2', { signal: c.signal });
} catch (e) {
  console.log(e.name); // AbortError
}

🔥 AbortController + signal дают нативный способ отменять fetch по таймауту, без лишнего кода.

📣 JS Ready | #совет

👩‍💻 Пытаешься не потеряться среди сотен строк?

TODO Highlight — расширение, которое делает комментарии TODO, FIXME, NOTE и другие заметными прямо в файле, подсвечивая их. Помогает быстрее находить, что осталось доделать, придавая наглядность задачам.

📣 JS Ready | #vscode

📂 Напоминалка для работы с React.js!

Например, useState помогает хранить состояние компонента, а useEffect — работать с побочными эффектами и запросами к API.

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

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

📣 JS Ready | #ресурс

Форматируем JSON прямо в коде, без внешних инструментов!

JSON.stringify умеет не только сериализовать, но и форматировать вывод — достаточно передать отступы третьим параметром:

JSON.stringify(obj, null, 2);

Отступ можно задать и табами, если такой формат удобнее читать при логировании:

JSON.stringify(obj, null, '\t');

Второй параметр — replacer, позволяет явно перечислить поля, которые попадут в вывод, что удобно для отладки больших объектов:

JSON.stringify(obj, ['a', 'b'], 2);

Пример с табуляцией для читаемого вывода в консоль:

console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, '\t'));

Корректный вывод будет таким (значения — строки в кавычках, как и требует формат JSON):

{
  "alpha": "A",
  "beta": "B"
}

🔥 JSON.stringify — быстрый способ получить читаемый и точный JSON-вывод прямо в консоли, с контролем полей и отступов.

📣 JS Ready | #совет

👍 Omatsuri — набор полезных инструментов для фронтенд-разработчика!

Это целый сборник небольших онлайн-утилит, которые помогают в повседневной работе. Здесь можно генерировать и копировать CSS-градиенты, тени, clip-path, SVG-паттерны и другие визуальные штуки, сразу с готовым кодом. Удобный сайт, когда нужно быстро поэкспериментировать с визуалом или просто не писать всё с нуля.

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

📣 JS Ready | #ресурс

Практика отладки: читаемые логи в DevTools!

При выводе массивов объектов в консоль стандартный console.log быстро теряет читаемость. Для структурированного представления данных стоит использовать console.table():

const bugs = [
  { id: 1, title: "CSS не грузится", status: "open" },
  { id: 2, title: "API 500", status: "fixed" },
  { id: 3, title: "Кнопка не реагирует", status: "open" }
];

console.table(bugs);

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

Для акцентирования внимания на важных событиях можно использовать стилизацию через спецификатор %c:

console.log(
  "%cCRITICAL BUG DETECTED",
  "font-size: 18px; font-weight: bold; color: red;"
);

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

Чтобы структурировать поток сообщений в консоли, используйте группировку:

console.group("User Load Flow");
console.log("Запрос данных пользователя");
console.log("Запрос ролей");
console.groupEnd();

Группы упрощают навигацию по логам при анализе сложных сценариев и асинхронных процессов.

🔥 Структурированные логи ускоряют отладку, снижают когнитивную нагрузку и делают консоль понятной не только автору кода.

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

Инициализация значений без лишних if и проверок!

Частая бывает нужно инициализировать значения, если они ещё не заданы, и не перебирать валидные данные.

Раньше многие делали так:

if (config.timeout == null) config.timeout = 3000;

Теперь это делается одним оператором:

config.timeout ??= 3000;

??= срабатывает только для null и undefined, не трогая 0, '', false.

Если логика другая, используем ||=:

user.name ||= 'Guest';

Значение подставится, если текущее falsy.

А &&= удобно использовать, как отключение флага:

flags.debug &&= isDev;

Если debug был true, он станет isDev. Если false - останется false.

🔥 Logical assignment operators позволяют выражать намерение напрямую: инициализировать, если пусто, подставить, если falsy, обновить, если включено.

📣 JS Ready | #совет

👩‍💻 Верстай быстрее и не теряться в длинных списках классов!

Tailwind CSS IntelliSense — расширение, которое кардинально улучшает работу с фреймворком, предоставляя автодополнение для классов и директив, подсветку синтаксиса и предпросмотр стилей по наведению, делая разработку намного быстрее и удобнее.

📣 JS Ready | #vscode

Динамический импорт модулей в браузере (ES Modules)!

Браузеры давно поддерживают загрузку модулей в рантайме через import(). Это позволяет не грузить весь JS сразу: ленивые фичи, плагины, тяжёлые виджеты, админ-разделы SPA — всё подгружается по запросу и кэшируется как обычный ESM-модуль.

Базовый import в консоли:

import("/path/to/module.js")
  .then(m => console.log("Модуль загружен:", m))
  .catch(e => console.error("Ошибка загрузки:", e));

Импорт и сразу использование экспорта:

import("/path/to/math.js")
  .then(({ sum }) => console.log("Sum:", sum(2, 3)))
  .catch(console.error);

Ленивая загрузка по клику на конкретный элемент UI:

document.querySelector("#confettiBtn")?.addEventListener("click", () => {
  import("/path/to/confetti.js")
    .then(m => m.run())
    .catch(console.error);
});

Простая (приблизительная) проверка поддержки динамического import:

const supportsDynamicImport = (() => {
  try { new Function("import('data:text/javascript,')"); return true; }
  catch { return false; }
})();
console.log("Dynamic import support:", supportsDynamicImport);

Важно: import() асинхронный, UI не блокируется; ошибки обрабатываются в .catch(), модуль кэшируется браузером.

Короткий пример с обработкой ошибок:

import("/path/to/user-profile.js")
  .then(m => m.init())
  .catch(e => console.error("Ошибка загрузки модуля:", e));

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

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

👍 Нашел отличную статью на Хабре: «От Electron к Tauri: как я пересобрал архитектуру десктоп-приложения»!

В этой статье:
• Автор подробно рассказывает, как он пробовал разные архитектуры для десктоп-приложения;
• Показывает реальные проблемы производительности, безопасности и размера дистрибутива;
• Делится опытом перехода на Rust + Tauri, где фронтенд остаётся веб-UI, а ядро становится быстрым и безопасным;
• Объясняет архитектурные решения, которые позволили снизить размер сборки и улучшить UX;

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

📣 JS Ready | #статья

📂 Напоминалка по API и SDK!

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

На картинке — наглядная шпаргалка по разнице между API и SDK: структура API-запроса (метод, endpoint, параметры, ключ доступа) и что обычно входит в SDK (библиотеки, API, модули и инструменты для разработки).

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

📣 JS Ready | #ресурс