😎 UIverse — огромная коллекция современных UI-компонентов созданных на HTML, CSS и Tailwind.

Кнопки, карточки, загрузки и т.д, которые можно скопировать код прямо в проект, кастомизировать стили, и вдохновиться свежими UI-решениями от сообщества.

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

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

Intersection Observer — отслеживаем появление элементов в области видимости!

Эффективная альтернатива scroll-событиям. Используется для ленивой загрузки, анимаций и инфинит-скролла.

Инициализируем наблюдатель:


const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
    }
  });
});



Подключаем наблюдение:


document.querySelectorAll('.anim').forEach((el) => {
  observer.observe(el);
});



Стили для появления:


.anim { opacity: 0; transform: translateY(30px); transition: 0.4s ease; }
.visible { opacity: 1; transform: none; }



🔥 Простая и масштабируемая практика, которую используют в продакшене: YouTube, Medium, e-commerce.

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

😎 Советую YeaHub — это IT платформа объединяющая обучение, подготовку к собеседованиям и развитие карьеры в одном месте!

База реальных собеседований от Т-Банк, Яндекса, Сбера и 100+ топовых компаний. 10 000+ вопросов по Frontend, Backend, DevOps и другим направлениям. Удобный тренажёр, персональная статистика и еженедельные обновления.

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

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

👩‍💻 Гибкость и чистота в стилях? Всё это про var!

Функция var() возвращает текущее значение кастомного свойства. Если оно поменяется, то функция сразу вернёт актуальное значение.

Где особенно полезно:

• При создании дизайн-систем — единый цвет, отступ или размер в одном месте.

• В тёмной/светлой темах — просто меняешь значение переменной.

• В анимациях — переменные можно менять динамически, и они участвуют в переходах.

Главное: var — это не просто про удобство, это про контроль и масштабируемость. Один раз задал, и используешь в 100 местах без дублирования.

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

👩‍💻 Шпаргалка по cursor в CSS.

Например, cursor: pointer; делает курсор в виде руки — это сигнализирует, что элемент кликабельный. А cursor: none; полностью скрывает курсор.

На картинке — 16 популярных значений свойства cursor.

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

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

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

Prettier — плагин для VS Code, который форматирует ваш код по единым стандартам: ставит отступы, пробелы, переносы строк и даже следит за запятыми.

Работает с JavaScript, HTML, CSS и множеством других языков. Особенно полезен в командной разработке — один стиль на всех, меньше споров.

Без лишней суеты — сохраняете файл, и Prettier сам всё приводит в порядок.

📣 Code Ready | #vscode

👍 React JS — курс для начинающих!

Пошаговое и современное введение в React — самую популярную библиотеку для фронтенд-разработки. Автор объясняет ключевые концепции без воды: компоненты, JSX, хуки, состояние и маршрутизацию. Отличный старт, чтобы уверенно войти в React-экосистему.

Ссылочка на видео: YouTube🖤

📣 Code Ready | #курс