⚙️ Что такое свойство 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

🖥 Верстаем сложный прогрессбар в 2026 году

Автор показывает, как сегодня делать круговой прогрессбар на чистом CSS: один div, одно свойство, нормальная поддержка. Потом тюнинг, визуал и немного CSS-магии. Без SVG-страданий.

🔗 Ссылка

CodeBase | Frontend | #article

12 января

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

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

⚡️Text frame border animation rotation — Рамка из текста с анимацией вращение и эффектом при наведении.

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

🔗 Ссылка

CodeBase | Frontend | #animate

👩‍💻 Метод Array.from() в JavaScript и как он используется

Метод Array.from() создаёт настоящий массив из массивоподобных или итерируемых объектов
(например, NodeList, arguments, Set, Map).

➡️ Пример:

const buttons = document.querySelectorAll("button");

const btnArray = Array.from(buttons);
btnArray.forEach(btn => btn.classList.add("active"));

🗣️ В этом примере:

• querySelectorAll возвращает NodeList, а не массив
• Array.from() превращает его в массив
• после этого доступны map, filter, forEach и другие методы

Array.from() — это мост между «псевдомассивами» и полноценными массивами, без костылей и циклов

CodeBase | Frontend | #JS

⚡️ Jelly Squish Button — Кнопка с эффектом желе.

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

🔗 Ссылка

CodeBase | Frontend | #animate

🖥 Прагматичное руководство по современным цветам в CSS

Автор разбирает, как новые CSS-фичи для работы с цветом упрощают жизнь разработчику: что появилось, зачем это нужно и как использовать, не влезая в теорию цвета.

🔗 Ссылка

CodeBase | Frontend | #article

🖥 Какие новые HTML и CSS фичи полностью поддерживаются браузерами в 2026 году

Автор собрал HTML и CSS-фичи, которые к 2026 стали реально поддерживаться браузерами. Без теории и споров, просто список того, что уже можно смело тащить в прод.

🔗 Ссылка

CodeBase | Frontend | #article