Создаём tooltip с копированием в буфер!

Наводим — появляется текст. Кликаем — копируем и показываем «Copied!».

Создаём tooltip-элемент и добавляем в DOM. Находим нужный элемент и создаём подсказку внутри него.

const el = document.querySelector(".copy-tooltip");
const tooltip = document.createElement("div");
el.appendChild(tooltip);

Появление текста и копирование разделены для ясности.

el.addEventListener("mouseenter", () => {
  tooltip.textContent = "Click to copy";
});
el.addEventListener("click", () => {
  tooltip.textContent = "Copied!";
  navigator.clipboard.writeText(el.dataset.copy);
});

Убираем текст при уходе мыши, очищаем подсказку.

el.addEventListener("mouseleave", () => {
  tooltip.textContent = "";
});

🔥 Работает на любом элементе с data-copy, не требует стилей или библиотек.

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

👩‍💻 Рассмотрим scrollbar-gutter — сохраняем макет при появлении скроллбара!

Свойство scrollbar-gutter решает проблему с «прыгающей» шириной контента при появлении или скрытии скроллбара.

Есть 3 возможных значения:

• auto — дефолтное значение.

• stable — отступ для скроллбара появляется если значение overflow равно hidden, scroll или auto, вне зависимости от того, вызывает контент переполнение или нет.

• stable both-edges — то же самое что и stable, но отступы будут создаваться с двух противоположных сторон.

Контент остаётся на месте, независимо от того, есть скролл или нет. Особенно полезно на десктопах.

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

❤️ Нашёл полезную статью по созданию полноценного SPA с использованием Laravel и Vue.js!

В этой статье:
• Настройка Laravel и создание REST API для продуктов;
• Создание компонентов Vue.js для отображения и редактирования продуктов;
• Настройка маршрутизации с Vue Router для SPA;
• Интеграция фронтенда и бэкенда в одно приложение с динамическим интерфейсом;

🔊 Подробное руководство на Habr!

📣 Code Ready | #статья

👩‍💻 Знаете, что в VS Code можно рисовать схемы и проектировать архитектуру прямо в редакторе?

Excalidraw — плагин, с которым можно создать чистое полотно, рисовать фигуры, стрелки, писать текст и визуализировать логику приложения без сторонних инструментов.

Идеально, если нужно накидать структуру БД, связи между модулями или продумать архитектуру на лету — прямо в процессе работы.

📣 Code Ready | #vscode

👩‍💻 Подсказка по :nth-child в CSS.

Селектор :nth-child() помогает выбирать элементы по их позиции в родителе: чётные, нечётные, кратные, с шагом и с конца.

На картинке — 10 вариантов, которые ускорят работу с вёрсткой.

Сохрани, чтобы не искать в документации каждый раз!

📣 Code Ready | #ресурсы

Настройка свойств объекта в JavaScript!

С помощью дескрипторов можно задать поведение свойств: сделать их неизменяемыми, скрытыми или защищёнными от удаления. Ниже — три ключевых примера.

Создаём свойство id, которое нельзя перезаписать:

const obj = {}

Object.defineProperty(obj, 'id', {
  value: 123,
  writable: false,
})

Добавим свойство hidden, которое не видно в for...in и Object.keys():

Object.defineProperty(obj, 'hidden', {
  value: 'secret',
  enumerable: false,
})

Установим свойство flag с жёсткой защитой от изменений:

Object.defineProperty(obj, 'flag', {
  value: true,
  configurable: false,
})

🔥 Эти приёмы пригодятся при создании API и контроле внутренней логики.

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

👩‍💻 Знаете, что в VS Code можно сразу увидеть, насколько «тяжёлый» каждый импорт?

Import Cost — показывает, сколько килобайт добавит та или иная библиотека. Особенно полезно новичкам: помогает следить за производительностью, избегать тяжёлых зависимостей.

Можно наглядно понять, где стоит использовать точечный импорт и как не раздуть приложение лишним весом.

📣 Code Ready | #vscode

👩‍💻 Можно ли предотвратить случайный скролл всей страницы при прокрутке вложенного блока?

Свойство overscroll-behavior позволяет это контролировать — оно отвечает за то, как ведёт себя скролл при достижении краёв вложенных элементов.

Как пишется:

• auto — поведение по умолчанию, скролл "переходит" к родителю.

• contain — скролл не выходит за пределы элемента.

• none — блокирует и bounce-эффект, и прокрутку родителя.

• overscroll-behavior-y / -x — управление по осям.

Это свойство часто используют в модалках, слайдерах, выпадающих списках — чтобы скролл оставался там, где должен быть, и не мешал остальной странице.

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