👩‍💻 Как работают переменные CSS?

Переменные CSS (также известные как кастомные свойства) позволяют задавать значения, которые можно использовать повторно в разных частях стилей. Это удобно, если вам нужно централизованно управлять цветами, шрифтами и отступами.

➡️ Пример:

:root {
  --main-color: #3498db;
  --font-size: 16px;
}

.container {
  color: var(--main-color);
  font-size: var(--font-size);
}

.container:hover {
  --main-color: #e74c3c; /* изменение значения переменной */
  color: var(--main-color);
}

🗣️ В этом примере переменные --main-color и --font-size используются в нескольких селекторах. Они позволяют менять значение переменных в одном месте, обновляя их сразу в нескольких элементах стилей.

Использование переменных CSS упрощает создание тем, адаптацию стилей и управление часто повторяющимися значениями.

CodeBase | Frontend | #css

⚡️ TanStack Query – библиотека для работы с данными и управлением состоянием, которая упрощает процесс получения, кэширования, синхронизации и обновления данных в приложениях.

Среди основных функций TanStack Query – автоматическое кэширование данных, управление памятью и сборщиком мусора, а также отложенное обновление данных и асинхронная обработка запросов.

➡️ Библиотека предназначена для использования с TypeScript/JavaScript, React, Solid, Vue и Svelte.

✔️ Главное преимущество: значительно повышает производительность приложения.

👩‍💻 GitHub

CodeBase | Frontend | #tool

⚡️Diorama — Интерактивная модель ПК с комнатой внутри.

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

🔗 Ссылка

CodeBase | Frontend | #animate

👩‍💻 Как работает оператор опциональной цепочки (Optional Chaining) в JavaScript?

Оператор опциональной цепочки ?. позволяет обращаться к свойствам объектов, которые могут быть null или undefined, без необходимости проверять каждое звено цепочки. Это особенно полезно при работе с вложенными объектами и API-ответами.

➡️ Пример:

const user = {
  name: 'Alice',
  address: {
    city: 'New York'
  }
};

console.log(user.address?.city); // 'New York'
console.log(user.contact?.email); // undefined (без ошибки)

🗣️ В этом примере оператор ?. позволяет безопасно обратиться к user.contact.email, не вызывая ошибку, если contact отсутствует. Если в цепочке встречается null или undefined, код возвращает undefined.

Опциональная цепочка делает код более компактным и уменьшает вероятность ошибок, связанных с доступом к несуществующим свойствам.

CodeBase | Frontend | #js

⚡️Neon Clock — Анимированная сцена с неоновыми часами.

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

🔗 Ссылка

CodeBase | Frontend | #animate

Главное, что видит пользователь 🌞

CodeBase | Frontend | #meme

🖥 Web Skills — это наглядный обзор полезных навыков, которые необходимо освоить веб-разработчику. Он полезен как для тех, кто только начал изучать веб-разработку, так и для тех, кто работает в этой области уже много лет и хочет научиться чему-то новому.

⛓️ Ссылка на ресурс

CodeBase | Frontend | #resources

⚡️ Axios – популярная библиотека для выполнения HTTP-запросов в веб-браузерах и средах Node.js, лучшая альтернатива fetch().

Она предоставляет простой способ обработки асинхронных HTTP-запросов, что облегчает выполнение задач, связанных с отправкой и получением данных от веб-сервисов и API.

➡️ Axios построена поверх Promise API, что позволяет ей обрабатывать асинхронные задачи и возвращать результаты в виде обещаний: это упрощает обработку ошибок и выполнение множества одновременных запросов.

⚙️ Библиотека также имеет:

• Набор встроенных перехватчиков, которые позволяют контролировать взаимодействие приложения с HTTP-сервером.
• Встроенную поддержку для преобразования данных JSON.
• Автоматическую сериализацию данных.

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

👩‍💻 GitHub

CodeBase | Frontend | #tool

🖥 Vite vs CRA: Почему разработчики массово переходят на новый инструмент

Веб-разработчики уже давно привыкли к Create React App (CRA) как к стандарту для быстрого старта проектов. Но сейчас всё больше команд выбирают Vite – и на это есть причины! В статье разобраны ключевые отличия между этими инструментами, которые объясняют массовую миграцию на Vite.

➡️ Перейти к статье

CodeBase | Frontend | #articles

⚡️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