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

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

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

Аналог background-size, но для тега <img> и <video>.

➡️ Пример:

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

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

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

🗣 В этом примере изображение заполняет контейнер и обрезается по краям без искажений.

CodeBase | Frontend | #CSS

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

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

🖥 Фишки Cursor — как сделать работу с ним дешевле и эффективнее?

Рассказываю, как выжать из Cursor максимум: настраиваю правила под директории, запускаю 3 ИИ сразу, объединяю фронт и бэк в одну папку — и получаю согласованный код без лишней суеты.

🔗 Ссылка

CodeBase | Frontend | #article

⚡️Gooey SVG Filter Button — Анимированная кнопка с эффектом при наведении

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

🔗 Ссылка

CodeBase | Frontend | #animate

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

👩‍💻 Что такое метод find() в JavaScript и как он используется?

find() — это метод массивов, который возвращает первый элемент, удовлетворяющий условию.
Если ни один элемент не подходит — возвращает undefined

➡️ Пример:

const users = [
  { name: "Анна", age: 22 },
  { name: "Борис", age: 30 },
  { name: "Вера", age: 25 }
];

const user = users.find(u => u.age > 25);
console.log(user); // { name: "Борис", age: 30 }

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

• find() перебирает массив объектов
• Возвращает первого подходящего пользователя
• Идеален для поиска по условиям: ID, имя, статус и т.д.

find() часто используется в списках, где нужен один конкретный элемент, а не все подходящие

CodeBase | Frontend | #JS

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

🖥 БЭМ + Tailwind: прагматичный гибрид для современного фронтенда

В статье покажу, как смешал БЭМ с Tailwind — без религиозных войн и ломки шаблонов. Расскажу, как ушёл от боли нейминга и выровнял отступы, ускорив разработку почти вдвое.

🔗 Ссылка

CodeBase | Frontend | #article

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

⚡️Button with tooltip hover timing feedback — Панель плеера с подсказками при наведении

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

🔗 Ссылка

CodeBase | Frontend | #animate

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

⚙️ Что такое атрибут disabled в HTML и зачем он используется?

Атрибут disabled делает элемент формы неактивным: его нельзя выбрать, изменить или отправить.

Применяется к <input>, <button>, <select>, <textarea> и другим интерактивным элементам

➡️ Пример:

<form>
  <label>
    Промокод:
    <input type="text" value="WELCOME2024" disabled>
  </label>
  <button type="submit">Отправить</button>
</form>

🗣️ Почему полезно:

• Блокирует ввод без JavaScript
• Удобен для отображения только для чтения
• Такой элемент не отправляется на сервер
• Часто используется для управления состоянием форм

disabled — простой способ временно выключить элементы в интерфейсе.

CodeBase | Frontend | #Основы