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

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 | #ресурс

😕 Нашёл классную пошаговую статью на Хабре про создание Telegram‑бота на чистом JavaScript!

В этой статье:
• Использование библиотеки grammY для работы с Telegram‑ботом;
• Конфигурация проекта;
• Как настроить клавиатуры, context‑объект и обработку ошибок;
• Инструкция по деплою бота на сервер;

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

📣 JS Ready | #статья

Итерация по объекту как по массиву пар с Object.entries()!

for...in перебирает enumerable строковые ключи, включая унаследованные — такие итерации требуют фильтрации через Object.hasOwn() или hasOwnProperty().

Если нужны только собственные enumerable строковые ключи — удобнее сразу использовать Object.entries().

Object.entries() возвращает пары own enumerable string-keyed свойств (без Symbol, без non-enumerable):

const user = {
  name: "Alex",
  age: 30,
  role: "developer"
};

for (const [key, value] of Object.entries(user)) {
  console.log(`${key}: ${value}`);
}

Распространённый кейс — валидации перед запуском бизнес-логики (например, запретить undefined в значениях):

Object.entries(user).forEach(([k, v]) => {
  if (v === undefined) {
    throw new Error(`Значение "${k}" не должно быть undefined`);
  }
});

Map оправдан, когда нужны частые set/delete, map.size, не-строковые ключи или словарная структура без ограничений объекта:

const userMap = new Map(Object.entries(user));
console.log(userMap.get("role"));

Нормализация объекта в массив DTO для API или записи в БД:

const dto = Object.entries(user).map(([field, value]) => ({
  field,
  value,
  updatedAt: new Date().toISOString()
}));

console.log(dto);

🔥 Такой подход делает обработку объекта структурной и удобной для масштабирования логики.

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

🤓 Напоминалка для работы с Git

Если кто не знает, Git — это система контроля версий, которая помогает отслеживать историю изменений в файлах.

Например с помощью команды git pull, можно загружать удаленные репозитории к себе на ПК, чтобы вести разработку локально, не затрагивая продуктовую или dev ветку.

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

📣 JS Ready | #ресурс