CodeBase | Frontend

👩‍💻 Что такое метод 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

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

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

⚡️Infinitely drawing icons — Интересная анимация загрузки- Технологии: CSS 🔗 Ссылка CodeBase | Frontend | #animate

Он еще пользуется пейджером, а ты еще не подписался на топовые каналы ⚡️⚡️

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

🖥 100K юзеров за 3 дня — что сломалось после релиза Разбор запуска мини-приложения в Telegram: RPS ×10, оптимизация Node.js, борьба с MongoDB и CPU, Grafana, Sentry, Cloudflare. Что сломалось и как починили. 🔗 Ссылка CodeBase | Frontend | #article

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

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

⚡️3D wave animation — Анимированная галерея с эффектом волны Технологии: CSS 🔗 Ссылка CodeBase | Frontend | #animate

MaxSwap — твоя финансовая свобода в мире криптовалют Если устал от бешенных комиссий банков, сложных процедур и бесконечных карт, то MaxSwap создан специально для тебя. 💳Твой виртуальный криптокошелек, который всегда под рукой. Почему криптодержатели выбирают MaxSwap: ✅Мгновенная активация карты без лишних вопросов. Просто подключи и пользуйся. ✅Низкие комиссии. Больше валюты останется у тебя. ✅Анонимные платежи. Безопасные покупки везде, где бы ты ни оказался. ✅Управление криптой через Telegram или мобильном приложении. Все в одном месте — удобно и просто. Открой для себя новые криптовозможности. Открой MaxSwap.

👩‍💻 Как работает свойство position: sticky в CSS? Свойство position: sticky позволяет элементу переключаться между относительным и фиксированным позиционированием в зависимости от его прокрутки. Оно фиксирует элемент в определённой точке, пока его родительский контейнер находится в пределах видимости. ➡️ Пример:

<div class="container">
  <h2 class="sticky-header">Я остаюсь на месте!</h2>
  <p>Содержимое...</p>
  <p>Содержимое...</p>
  <p>Содержимое...</p>
</div>

<style>
  .container {
    height: 200px;
    overflow: auto;
    border: 1px solid black;
  }

  .sticky-header {
    position: sticky;
    top: 0; /* Фиксирует элемент у верхнего края контейнера */
    background-color: lightblue;
    padding: 10px;
  }
</style>

🗣️ В этом примере заголовок с классом .sticky-header остаётся на месте, пока пользователь прокручивает содержимое контейнера. Как только прокрутка выходит за пределы контейнера, элемент снова становится относительным.

Свойство sticky удобно для создания фиксированных заголовков таблиц, меню и других интерфейсных элементов, которые должны оставаться видимыми в пределах их контейнера.

CodeBase | Frontend | #css

Подборка 3 лучших IT каналов, необходимых каждому 💻 GitHack — репозитории, секретные утилиты, фишки, о которых не пишут в блогах. 🌐 GitWeb — топовые сайты, подборки и инструменты для веб разработки. 🐍 GitPython — лучшие тулзы недели, репозитории, необходимые фишки питона, которые должен знать каждый разработчик 🎁 Всё бесплатно и полезно. Подпишись и будь в курсе всего, что происходит в IT

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

Для тех, кто не забывает, вот наши канали : Telegram Книги 📖 ➤https://t.me/Geek_book_hub Telegram Arduino 📻 ➤ https://t.me/club_arduino Telegram для 3д принтера⚙️ ➤https://t.me/forprinting3D Telegram Ali_Radio_Top🛠 ➤https://t.me/Ali_radio_top