Форматируем 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 | #ресурс

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

Например, let и const используются для корректного объявления переменных, map и forEach — для обработки массивов, а includes и split помогают при работе со строками.

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

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

📣 JS Ready | #ресурс

Выполнение опциональных колбэков!

Очень частая ситуация: колбэк может быть передан, а может и нет.

Обычно код обрастает проверками:

if (typeof onClose === 'function') {
  onClose();
}

В современном JS это решается одной операцией - optional chaining для вызова функций:

onClose?.();

То же самое работает с аргументами и вложенными объектами:

options.onError?.(err);

Если функции нет - ничего не происходит, без ошибок и лишнего кода.

Особенно хорошо читается в UI, хендлерах и SDK:

props.onSubmit?.(data);

🔥 ?.() - короткий и безопасный способ вызывать опциональные функции без проверок.

📣 JS Ready | #совет

❤️ Crockford — материалы человека, который сыграл ключевую роль в развитии JS!

Здесь собраны статьи и материалы программиста, который сыграл огромную роль в развитии JS и придумал JSON. Крокфорд объясняет, где в JS сильные стороны, где опасные места и какие подходы реально работают в долгосрочной перспективе. Это хороший ресурс, если ты уже знаешь основы и хочешь лучше понять логику его дизайна и то, как писать более надёжный и понятный код.

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

📣 JS Ready | #ресурс