🖥 Создаем UI-Kit на React: пошаговое руководство по настройке

Статья описывает, как настраивать UI-Kit на React: от установки зависимостей и сборки до тестирования, линтинга и документирования. Пошаговый разбор полного цикла разработки дизайн-системы.

🔗 Ссылка

CodeBase | Frontend | #article

⚡️Creepy Button — Интересная кнопка с анимацией при наведении и нажатии.

Технологии: SCSS, TS

🔗 Ссылка

CodeBase | Frontend | #animate

🥱 Никто не хочет смотреть на кишки проекта. Фантик важнее конфеты.

CodeBase | Frontend | #meme

🖥 Коллекция полезных CSS фишек, которые вы редко используете

Автор показывает полезные возможности CSS, которые легко пропустить в вечной гонке за новыми фреймворками. Только фичи, которые реально упрощают жизнь и код.

🔗 Ссылка

CodeBase | Frontend | #article

⚡️Interactive Blackhole — Интересная кнопка с анимацией при наведении и нажатии.

Технологии: HTML, CSS, JS

🔗 Ссылка

CodeBase | Frontend | #animate

⚙️ Что такое свойство object-fit в CSS и зачем оно используется?

Свойство object-fit управляет тем, как изображение или видео масштабируется внутри контейнера, не искажая пропорции.

По смыслу похоже на background-size, но применяется к <img> и <video>.

➡️ Пример:

<div class="wrapper">
  <img src="photo.jpg" alt="пример">
</div>

<style>
  .wrapper {
    width: 300px;
    height: 200px;
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
</style>

🗣️ Популярные приёмы:

• cover — заполняет контейнер, обрезая лишнее
• contain — показывает всё изображение, сохраняя пропорции
• fill — растягивает без сохранения пропорций
• none — без масштабирования

object-fit решает классическую проблему «кривых картинок» в карточках, галереях и адаптивных интерфейсах

CodeBase | Frontend | #Основы

🖥 Atomic CSS: верстка и легкость бытия

Автор спокойно разбирает Atomic CSS: какие мифы вокруг него живы, где он реально помогает, а где мешает. Практика, примеры и выводы без фанатизма и холиваров.

🔗 Ссылка

CodeBase | Frontend | #article

Мы в MAX: 📲 https://max.ru/lazy__programmer

🦥Ленивый программист ©

⚡️destination slider — Анимированный слайдер достижения цели.

Технологии: SVG, GSAP

🔗 Ссылка

CodeBase | Frontend | #animate