Как сделать ужасный для пользователя интерфейс. Коллекция HTML/CSS лайфхаков

Собрал коллекцию HTML и CSS-ужасов для тех, кто вдруг решил саботировать интерфейс. Всё максимально вредно, эффективно и бесит пользователя до искр в глазах

CSS-only Custom range slider

Интересный слайдер с динамичным отображением

❓ Зачем используется метод some() в JavaScript и когда его применять?

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

✅ Пример:

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

const hasAdmin = users.some(user => user.isAdmin);
console.log(hasAdmin); // true

📌 В этом примере some() вернёт true, потому что в массиве есть хотя бы один пользователь с isAdmin: true.

some() удобно использовать для валидации, проверки доступа, поиска флагов или условий в списках. Это делает код чище, короче и более декларативным, особенно при работе с массивами объектов.

Hover Glyph Button

Кнопка с анимированным эффектом при наведении

Перенаправления в Angie: return, rewrite и примеры их применения

В этой статье мы разберём все основные методы перенаправлений: от простых до сложных. Начнём с общего принципа обработки директив в модуле rewrite.

Collapsible Timeline

Таймлайн с возможностью раскрывать пункты

Где хибара деревянная, а где град каменный: сказ о сайтах простых и сложных

Когда стоит задача «нужен сайт», то есть три пути: шаблон, конструктор и разработка с нуля. Разбираемся, когда не стоит экономить, а когда лучше вообще не начинать.

Playbook CSS scroll animation w/ subgrid

Сцена с интересной реализацией анимированного скролла

❓ Зачем используется метод 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 — например, когда нужно убедиться, что все чекбоксы отмечены. Делает код чище, понятнее и избавляет от громоздких циклов.

Product Filtering UI

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