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

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

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

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

📣 Code Ready | #ресурс

Синхронизация данных между вкладками!

Если у пользователя открыто несколько вкладок одного сайта, браузер позволяет им обмениваться сообщениями в пределах одного origin через стандартный BroadcastChannel API.

Создаём канал для обмена событиями:

const channel = new BroadcastChannel("app_sync");

Из одной вкладки отправляем событие в остальные:

channel.postMessage({
  type: "LOGOUT"
});

В других вкладках подписываемся на входящие сообщения:

channel.onmessage = (event) => {
  console.log(event.data);
};

Практический кейс — одновременный logout во всех вкладках приложения:

channel.onmessage = (event) => {
  if (event.data.type === "LOGOUT") {
    // Удаляем только auth-данные, без полного clear
    localStorage.removeItem("access_token");
    localStorage.removeItem("refresh_token");
    location.reload();
  }
};

Функция logout в текущей вкладке должна сначала выполнить локальную очистку, а затем уведомить остальные вкладки:

function logout() {
  localStorage.removeItem("access_token");
  localStorage.removeItem("refresh_token");

  channel.postMessage({ type: "LOGOUT" });
}

Работает нативно, поддерживается современными браузерами, описан в HTML Living Standard.

🔥 Почему BroadcastChannel, а не localStorage events: это нативный event-bus без побочных записей в localStorage, не требующий триггерных ключей и дающий более чистую, предсказуемую модель событий.

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

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

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

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

📣 Code Ready | #ресурс

👩‍💻 Можно ли управлять тем, как ведут себя вложенные элементы в 3D-трансформациях?

Свойство transform-style определяет, будут ли дочерние элементы сохранять своё 3D-положение или сплющиваться в плоскость родителя при трансформациях.

Основные значения:

• flat — значение по умолчанию, все дочерние элементы проецируются в плоскость родителя;

• preserve-3d — сохраняет 3D-позиционирование вложенных элементов.

Свойство не наследуется. Нужно индивидуально задавать его для каждого следующего уровня вложенности.

📣 Code Ready | #свойство

Генератор QR-кодов прямо в браузере!

QR-коды часто нужны в разработке: передача ссылок, упаковка тестовых данных, автоматизация, обмен данными для ботов. Сделаем генератор на чистом JavaScript с помощью qrcode.

Подключаем библиотеку в браузер через CDN как ES-модуль:

<script type="module">
  import QRCode from "https://cdn.jsdelivr.net/npm/qrcode@1.5.3/+esm";
  // Делаем доступным глобально, чтобы примеры ниже работали при копипасте
  window.QRCode = QRCode;
</script>

Создаём функцию генерации QR в DataURL (data:image/png;base64,... по умолчанию):

async function generateQR(text) {
  try {
    const url = await QRCode.toDataURL(text, { width: 300 });
    console.log("QR DataURL:", url);
    return url;
  } catch (e) {
    console.error("Ошибка генерации QR:", e);
    return null;
  }}

Генерируем QR для ссылки или текста:

generateQR("https://example.com").then(qr => {
  if (qr) console.log("QR успешно создан");
});

Формально вызовы идут параллельно (fire-and-forget). Если нужен контроль завершения — используем Promise.all, но для простых задач достаточно forEach:

["Alpha", "Beta", "Gamma"].forEach(t => {
  generateQR(t).then(qr => console.log(`QR для ${t}:`, !!qr));
});

Генерация QR для JSON:

const payload = JSON.stringify({ id: 123, role: "tester", active: true });
generateQR(payload).then(qr => console.log("QR для JSON готов:", !!qr));

Можно кодировать JSON, токены и любые строковые данные.

🔥 В итоге получаем простой инструмент для генерации QR-кодов под большинство данных прямо в браузере. Легко встраивается в проекты, тестовые утилиты и ботов.

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

❤️ В Москве на стильной площадке TAU пройдет масштабная офлайн-конференция для инженеров, ориентированная на практику и живое общение — T-Sync Conf от Т-Технологий

На конференции:

• Выбор собственной траектории из восьми технических контуров — AI, Data, R&D, Security, UX/UI, Productivity, Observability и Platform;
• Демо-стенды с AI- и дата-платформами, где технологии можно протестировать руками;
• Инженерные диалоги с разбором реальных кейсов и инцидентов;
• Хакатон T-Hack Hardcore для продвинутых инженеров и публичная сборка сервиса в реальном времени;
• UX/UI инструменты — от интерфейсов до дизайн-систем.

📣 Code Ready | #конференция

👩‍💻 Строки с Tailwind-классами становятся слишком длинными?

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

📣 Code Ready | #vscode

👩‍💻 Быстро и просто обнуляем специфичность селекторов!

Одна из самых частых причин, почему стили не применяются, это разросшаяся специфичность селекторов.

Со временем каждый новый селектор должен быть сложнее предыдущего:

.header .nav .item a {
  color: red;
}

Такой код работает, но он повышает специфичность и делает дальнейшие переопределения всё сложнее.

В CSS есть способ этого избежать, использовать :where():

:where(.header .nav .item a) {
  color: red;
}

Особенность :where() в том, что он всегда имеет нулевую специфичность, независимо от того, что находится внутри.

Это значит, что правило применяется, но никогда не мешает более конкретным стилям компонентов. Именно поэтому :where() идеально подходит для базовых и системных стилей:

:where(button) {
  font: inherit;
}

:where(a) {
  color: inherit;
  text-decoration: none;
}

🔥 Такие правила не ломают компоненты, легко переопределяются и позволяют обходиться без !important.

📣 Code Ready | #совет