⚡️Cards with inverted border-radius — Карточки товаров с интересным решением для кнопки

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

🔗 Ссылка

CodeBase | Frontend | #animate

⚡️ Анонимная покупка доменов в боте

— Чекер банов и КТ
— Авто-подключение CloudFlare
— Управление DNS-записями
— Умный поиск доменов
— Регистрация за 14 секунд
— Более 40 доменных зон

Бот - @FastDomainBot

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

Атрибут maxlength ограничивает максимальное количество символов, которое пользователь может ввести в поле формы.

Применяется к <input> и <textarea>.

➡️ Пример:

<form>
  <label>
    Отзыв (до 100 символов):
    <textarea maxlength="100"></textarea>
  </label>
  <button type="submit">Отправить</button>
</form>

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

• Контролирует размер пользовательского ввода
• Уменьшает нагрузку на сервер
• Полезен для комментариев, полей имени, заголовков и т.п.

maxlength — простой способ ограничить ввод на стороне клиента без JS.

CodeBase | Frontend | #Основы

🖥 Как переносить «висячие» слова на следующую строку с помощью JavaScript

Для автоматического предотвращения переносов после коротких слов можно использовать JavaScript, который заменяет обычные пробелы на неразрывные пробелы ( ) после определённых слов.

🔗 Ссылка

CodeBase | Frontend | #article

⚡️Signature animation — Поле для ввода подписи с интересной анимацией

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

🔗 Ссылка

CodeBase | Frontend | #animate

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

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

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