⚡️3D wave animation — Анимированная галерея с эффектом волны

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

🔗 Ссылка

CodeBase | Frontend | #animate

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

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

z-index управляет порядком наложения элементов на странице. Чем больше значение — тем "выше" элемент расположен относительно других.

Работает только с элементами, у которых задано position (relative, absolute, fixed или sticky).

➡️ Пример:

<div class="box box1">Позади</div>
<div class="box box2">Поверх</div>

<style>
  .box {
    position: absolute;
    width: 200px;
    height: 100px;
    color: white;
    padding: 10px;
  }

  .box1 {
    background: #888;
    top: 50px;
    left: 50px;
    z-index: 1;
  }

  .box2 {
    background: #e74c3c;
    top: 80px;
    left: 80px;
    z-index: 2;
  }
</style>

🗣 В этом примере .box2 перекрывает .box1, потому что у неё z-index: 2.

CodeBase | Frontend | #CSS

🖥 100K юзеров за 3 дня — что сломалось после релиза

Разбор запуска мини-приложения в Telegram: RPS ×10, оптимизация Node.js, борьба с MongoDB и CPU, Grafana, Sentry, Cloudflare. Что сломалось и как починили.

🔗 Ссылка

CodeBase | Frontend | #article

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

⚡️Infinitely drawing icons — Интересная анимация загрузки-

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

🔗 Ссылка

CodeBase | Frontend | #animate

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

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

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

reduce() — это метод массивов, который сворачивает все элементы в одно итоговое значение, проходя по массиву слева направо.

Часто применяется для суммирования, подсчёта, объединения или построения новых структур данных.

➡️ Пример:

const numbers = [1, 2, 3, 4, 5];

// Суммируем элементы
const sum = numbers.reduce((acc, num) => acc + num, 0);

console.log(sum); // 15

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

• acc — аккумулятор (накапливает результат)
• num — текущий элемент массива
• 0 — начальное значение аккумулятора
• Возвращает одно значение, не изменяя исходный массив

reduce() универсален: им можно считать суммы, группировать объекты, строить словари и даже реализовать методы map / filter "вручную"

CodeBase | Frontend | #JS

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

🖥 Практическое руководство по иконкам в веб-проектах — Часть 1

Разбираюсь, как правильно использовать иконки в вебе: где встраивать SVG, когда подключать шрифты, зачем нужны viewBox и почему alt не спасёт. Примеры, нюансы, всё своё.

🔗 Ссылка

CodeBase | Frontend | #article

Причина гибели моих нервных клеток

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

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

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

🔗 Ссылка

CodeBase | Frontend | #animate