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

☕️ CodinGame — интерактивная игровая платформа для практики алгоритмов и структур данных!

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

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

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

👩‍💻 Рассмотрим Order — меняем визуальный порядок флекс-элементов, не меняя HTML!

При помощи свойства order можно менять порядок отображения флекс-элементов внутри флекс-контейнера.
Идеально для адаптивной верстки — можно менять порядок блоков на мобильных, не ломая основную структуру страницы.

Как работает:

• Элемент с меньшим order отображается раньше.

• По умолчанию order: 0 у всех.

Однако, свойство меняет только визуальный порядок. Стоит помнить об этом. Скринридеры по-прежнему будут читать элементы по порядку расположения в разметке.

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