👩‍💻 Удобная работа с API внутри VS Code!

REST Client - расширение, которое превращает редактор в удобный инструмент для работы с HTTP-запросами. Можно тут же получать ответ от сервера. Плагин поддерживает переменные и окружения, так что можно хранить токены, URL или параметры для разных проектов и легко подставлять их в запросы.

📣 Code Ready | #vscode

Нативная проверка, находится ли элемент в зоне видимости!

Когда нужно показать подсказку только если элемент действительно в зоне просмотра, подсветить активный пункт меню, автоплейнуть видео или зафиксировать секцию — можно использовать нативный getBoundingClientRect().

Проверяем частичную вертикальную видимость элемента в зоне просмотра:

function isVisible(el) {
  const r = el.getBoundingClientRect();
  return r.top < window.innerHeight && r.bottom > 0;
}

Использование:

const box = document.querySelector(".box");
console.log("Виден:", isVisible(box));

Наблюдение за видимостью при скролле:

window.addEventListener("scroll", () => {
  if (isVisible(box)) {
    console.log("Элемент в зоне просмотра");
  }
});

Мини-вариант для группы элементов:

document.querySelectorAll(".item").forEach(el => {
  if (isVisible(el)) {
    el.classList.add("active");
  }
});

🔥 Подходит для ленивых анимаций, подсветки активных блоков и аналитики скролла. А если нужен более точный и энергоэффективный вариант — используйте IntersectionObserver.

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

👩‍💻 Удобный способ унаследовать цвет текста родительского элемента!

currentColor — ключевое слово, которое берёт текущий color элемента и позволяет использовать его в других свойствах, например в рамке, тени или заливке.

Примеры использования:

• border: 2px solid currentColor; — рамка того же цвета, что и текст;

• box-shadow: 0 0 10px currentColor; — тень с цветом текста;

• fill: currentColor; — окрашивает SVG в цвет шрифта;

• outline-color: currentColor; — обводка совпадает с текстом.

Это полезно для упрощения стилей: если изменить color, все зависящие элементы автоматически обновят свой цвет.

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

👩‍💻 Стартовый экран на мобильных устройствах может занимать всё пространство без проблем!

На мобильных 100vh считает и адресную строку, поэтому блок получается выше видимой области, появляется лишний скролл:

.hero {
min-height: 100vh;
}

Современные браузеры дают точную единицу измерения — dvh:

.hero {
min-height: 100dvh;
}

🔥 В отличие от vh, 100dvh учитывает реальную доступную высоту без вмешательства UI браузера. Поддержка уже широкая, а где нужно, можно оставить vh как fallback.

📣 Code Ready | #совет

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

Например, git push отправляет твои изменения на сервер, а git checkout позволяет быстро переключаться между ветками.

На картинке — 12 самых нужных команд, которые стоит держать под рукой.

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

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

Извлекаем и обрабатываем выделенный текст — Selection API

Selection API позволяет получать выделение пользователя в DOM (кроме <input> и <textarea>, где нужно использовать selectionStart/selectionEnd). API подходит для подсветки, анализа, сохранения выделений и запуска контекстных действий.

Получаем выделенный текст:

const text = window.getSelection().toString();
console.log("Выделено:", text);

Отслеживаем изменения выделения:

document.addEventListener("selectionchange", () => {
  const t = window.getSelection().toString();
  if (t) console.log("Новое выделение:", t);
});

Извлекаем детали выделения:

const sel = window.getSelection();

console.log("anchorNode:", sel.anchorNode);
console.log("focusNode:", sel.focusNode);
console.log("rangeCount:", sel.rangeCount);

Удобный хелпер:

function onSelect(callback) {
  const handler = () => {
    const text = window.getSelection().toString().trim();
    if (text) callback(text);
  };

  document.addEventListener("selectionchange", handler);
  return () => document.removeEventListener("selectionchange", handler);
}

Использование:

const unsubscribe = onSelect(selected => {
  console.log("Пользователь выделил:", selected);
});

🔥 Такой пример полезен для практики работы с браузерными API, реакцией на системные события и динамическим управлением интерфейсом.

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

👩‍💻 Добавляем субтитры, описания и альтернативные дорожки!

Тег <track> используется внутри <video> или <audio> и добавляет к медиаконтенту текстовые дорожки: субтитры, описания, переводы и другие вспомогательные данные. Содержимое берётся из отдельного файла формата WebVTT (.vtt).

Основные атрибуты:

• src — путь к файлу .vtt, содержащему субтитры или метаданные;
• kind — тип дорожки;
• srclang — язык содержимого (например, "ru", "en");
• label — видимое имя дорожки в интерфейсе выбора;
• default — делает дорожку выбранной по умолчанию.

Если у атрибута kind значение не указано, то тип по умолчанию — subnoscripts (субтитры).

📣 Code Ready | #атрибут