Фронтенд Гайд

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

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

Sphere Packing Интерактивная сцена с шарами

❓ Зачем используется метод find() в JavaScript и когда его применять? Метод find() возвращает первый элемент массива, который удовлетворяет заданному условию. Это удобно, когда нужно найти одно подходящее значение, а не все. ✅ Пример:

const users = [
  { name: "Alice", isAdmin: false },
  { name: "Bob", isAdmin: true },
  { name: "Charlie", isAdmin: false }
];

const adminUser = users.find(user => user.isAdmin);
console.log(adminUser); // { name: "Bob", isAdmin: true }

📌 В этом примере find() вернёт объект пользователя Bob, так как он первый в массиве с isAdmin: true.

find() удобно использовать при поиске по коллекциям, например, чтобы получить конкретный объект по условию (email, ID, статус и т.д.). Это сокращает код и избавляет от ручного перебора, особенно при работе со сложными структурами.

Infinitely drawing icons Интерактивный фон с эффектом при перемещении курсора

Практическое руководство по иконкам в веб-проектах — Часть 1 Все ставят иконки, но мало кто думает, как. В этой статье разбираюсь, где, зачем и почему иконки работают (или не очень) в интерфейсе. Без теории — только практическое применение

Fancy Fading Footer Подвал с анимированным размытием при скролле

Как разработчики убивают бизнес Рассказываю, как программисты с опытом в проектах всех мастей сливают деньги компании — не багами, а поведением. Прагматично, жёстко, с прицелом на деньги. PM-ам читать дважды

Product Filtering UI Интерфейс фильтрации товаров

❓ Зачем используется метод every() в JavaScript и когда его применять? Метод every() проверяет, удовлетворяют ли все элементы массива заданному условию. Это удобно, когда нужно убедиться, что каждый элемент соответствует критерию, без написания явного цикла. ✅ Пример:

const scores = [92, 85, 88, 95, 90];
const allPassed = scores.every(score => score >= 80);
console.log(allPassed); // true

📌 В этом примере every() вернёт true, потому что все оценки больше или равны 80.

every() удобно использовать при валидации форм, проверке соответствия данных, или при условной логике в UI — например, когда нужно убедиться, что все чекбоксы отмечены. Делает код чище, понятнее и избавляет от громоздких циклов.

Playbook CSS scroll animation w/ subgrid Сцена с интересной реализацией анимированного скролла