⚡️On-Scroll Fire Transition — Страница с интересной реализацией скрола.

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

🔗 Ссылка

CodeBase | Frontend | #animate

⚡️ Swiper – библиотека для создания стильных и адаптивных слайд-шоу, каруселей и галерей.

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

➡️ Компоненты Swiper адаптируются к любым размерам экрана – слайдеры будут отлично выглядеть и одинаково хорошо работать на любых устройствах.

✔️ Главное преимущество: использует технологию виртуальных слайдов, которая загружает в DOM только необходимые изображения.

👩‍💻 GitHub

CodeBase | Frontend | #tool

Все мы с этого начинали 🍄

CodeBase | Frontend | #meme

👩‍💻 Как работает метод Array.prototype.reduce() в JavaScript?

Метод reduce() позволяет последовательно обрабатывать элементы массива, вычисляя итоговое значение, например, сумму чисел, объединение строк или создание объектов.

➡️ Пример:

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

// Вычисление суммы элементов массива
const sum = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);

console.log(sum); // 15

🗣️ В этом примере reduce() принимает два аргумента: функцию обратного вызова и начальное значение аккумулятора (0). Функция обратного вызова выполняется для каждого элемента массива, обновляя значение аккумулятора.

reduce() полезен для обработки массивов, позволяя выполнять сложные операции в компактной и читаемой форме.

CodeBase | Frontend | #js

⚡️Weather Widgets — Анимированный виджет погоды.

Технологии: Svg, SCSS, TypeScript

🔗 Ссылка

CodeBase | Frontend | #animate

⚡️ Chance – предоставляет набор функций и методов, которые позволяют генерировать случайные числа, строки, имена, номера телефонов, адреса электронной почты и многое другое.

Такие данные нужны для тестирования приложений и веб-сервисов, симуляции, анализа и визуализации данных.

➡️ Эффективно работает с датами и временем.

✔️ Главное преимущество: размер библиотеки – 55 КБ.

👩‍💻 GitHub

CodeBase | Frontend | #tool

⚡️Profile Card UI — Интерактивная визитка с анимированными кнопками.

Технологии: Svg, SCSS, JavaScript

🔗 Ссылка

CodeBase | Frontend | #animate

⚡️ Day.js – это минималистичная библиотека для работы с датами и временем, лучшая альтернатива Moment.js.

➡️ Она предоставляет простой API для выполнения различных операций, включая:

• конвертацию и локализацию дат;
• форматирование дат;
• парсинг и валидацию дат и времени;
• работу с временными зонами.

Особенность Day.js – использование неизменяемых объектов для хранения данных, что гарантирует согласованность данных и упрощает работу с ними. Библиотека также предоставляет набор методов для выполнения сложных операций с датами и временем.

✔️ Главное преимущество: размер библиотеки – 2 КБ.

👩‍💻 GitHub

CodeBase | Frontend | #tool

👩‍💻 Что такое Promise.all в JavaScript и как он работает?

Promise.all позволяет запускать несколько промисов одновременно и получать их результаты, когда все промисы выполнены. Если один из промисов завершится с ошибкой, общий результат тоже будет отклонён.

➡️ Пример:

const promise1 = Promise.resolve(10);
const promise2 = Promise.resolve(20);
const promise3 = Promise.resolve(30);

Promise.all([promise1, promise2, promise3])
  .then((results) => console.log(results)) // [10, 20, 30]
  .catch((error) => console.error('Ошибка:', error));

🗣️ В этом примере все промисы выполняются параллельно. Результаты объединяются в массив, если все успешно завершились. Это полезно для работы с множеством асинхронных операций.

CodeBase | Frontend | #js

⚡️Dropdown Menu Effects — Анимированное выпадающее меню с эффектами при нажатии.

Технологии: Svg, SCSS, JavaScript

🔗 Ссылка

CodeBase | Frontend | #animate

⚡️ FullCalendar – библиотека для создания интерактивных календарей в веб-приложениях на React, Vue и Angular.

➡️ Она предоставляет:

• возможность функциональной кастомизации;
• большой выбор тем оформления;
• обработку кликов и поддержку перетаскивания;
• набор функций для отображения событий;
• оддержку множества представлений календаря, включая просмотр по задачам, дням, неделям и месяцам.

✔️ Главное преимущество: простота использования данных календаря в CRUD-операциях.

👩‍💻 GitHub

CodeBase | Frontend | #tool

👩‍💻 Что такое grid-template-areas в CSS и как оно работает?

grid-template-areas — это свойство CSS, которое позволяет задавать макет сетки с помощью именованных областей. Оно делает код понятным и удобным для построения сложных макетов.

➡️ Пример:

<div class="grid-container">
  <header class="header">Header</header>
  <nav class="sidebar">Sidebar</nav>
  <main class="content">Content</main>
  <footer class="footer">Footer</footer>
</div>

<style>
  .grid-container {
    display: grid;
    grid-template-areas:
      "header header"
      "sidebar content"
      "footer footer";
    grid-template-columns: 1fr 2fr;
    gap: 10px;
  }

  .header {
    grid-area: header;
    background-color: lightblue;
  }

  .sidebar {
    grid-area: sidebar;
    background-color: lightgreen;
  }

  .content {
    grid-area: content;
    background-color: lightyellow;
  }

  .footer {
    grid-area: footer;
    background-color: lightcoral;
  }
</style>

🗣️ В этом примере grid-template-areas задаёт сетку с областями для заголовка, боковой панели, основного контента и подвала. Каждая область легко связывается с соответствующими элементами через grid-area.

CodeBase | Frontend | #css