⚡️ Nx – это система сборки нового поколения: помогает ускорить CI и облегчить поддержку рабочего пространства.

Nx построен в модульном стиле – можно использовать только те функции, которые вам нужны. В пакете Nx есть все нужные инструменты для управления проектом – анализ рабочего пространства, выполнение задач, кэширование, распределение, генерация кода и автоматические миграции.

➡️ Основные особенности Nx:

• Архитектура монорепозитория – все версии кода и метаданные хранятся в одном месте, что упрощает управление кодовой базой проекта и снижает риск конфликтов при слиянии
• Удаленное кэширование.
• Автоматизированное и динамическое распределение задач на несколько машин.
• Быстрая и оптимизированная CI, чтобы не собирать один и тот же код повторно.

✔️ Главное преимущество: Nx интегрируется с GitHub, GitLab и BitBucket и делает процесс CI более продуктивным, устраняя любые интеграционные сложности между различными инструментами.

👩‍💻 GitHub

CodeBase | Frontend | #tool

⚡️light/dark mode — Стильное переключение темной темы с анимацией.

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

🔗 Ссылка

CodeBase | Frontend | #animate

👩‍💻 Symbol в JavaScript

Symbol — это уникальный идентификатор в JavaScript, который часто используется для создания приватных свойств объектов, исключая конфликт с другими свойствами.

➡️ Пример:

const id = Symbol('id');
const user = {
  name: 'Alice',
  [id]: 12345 // свойство с уникальным ключом-символом
};

console.log(user.name); // 'Alice'
console.log(user.id); // undefined
console.log(user[id]); // 12345

Здесь символ создаёт уникальное свойство id, к которому можно получить доступ только через переменную id.

⚙️ Примеры использования Symbol:

• Приватные свойства объектов.
• Уникальные ключи в объектах.
• Спецификация итераторов для for...of.

CodeBase | Frontend | #js

⚡️ ClickVote – открытая библиотека для простого добавления реакционных компонентов («лайк» , «проголосовать», «поставить оценку») на любой сайт, в no-code и веб-приложения.

➡️ Основные особенности ClickVote:

• Предустановленные компоненты для лайков, рейтингов, звезд, плюсов и минусов.
• Поддержка различных фреймворков, включая React, Vue и Svelte.
• Мгновенная аналитика реакций пользователей.

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

🔗 Сайт

CodeBase | Frontend | #tool

⚡️Download the Matrix — Кнопка для скачивания с крутой анимацией при нажатии.

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

🔗 Ссылка

CodeBase | Frontend | #animate

👩‍💻 Как работает метод bind() в JavaScript?

Метод bind() создаёт новую функцию с привязанным контекстом this. Это полезно, когда нужно сохранить контекст для вызова функции позже, особенно если она будет использована как обратный вызов или в другом контексте.

➡️ Пример:

const user = {
  name: 'Alice',
  greet() {
    console.log(`Привет, ${this.name}!`);
  }
};

const greetFunc = user.greet.bind(user);
greetFunc(); // 'Привет, Alice!'

Метод bind() часто используется для передачи методов в качестве обратных вызовов с сохранённым контекстом.

CodeBase | Frontend | #js

⚡️ Mantine – популярная открытая библиотека React-компонентов для создания стильных и адаптивных веб-приложений.

Помимо набора из 120+ настраиваемых компонентов, библиотека предоставляет 50+ полезныx хуков для расширения функциональности фронтенда.

➡️ Основные особенности ClickVote:

• Обширный набор стильных компонентов, которые можно настраивать как угодно.
• Встроенные хуки для упрощения общих задач фронтенда.
• Поддержка темного режима.
• Реализация на TypeScript.

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

👩‍💻 GitHub

CodeBase | Frontend | #tool

⚡️Very cool animated text — Стильная анимация вращающегося текста по спирали.

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

🔗 Ссылка

CodeBase | Frontend | #animate

👩‍💻 Как работает свойство flex-grow в CSS?

Свойство flex-grow в CSS управляет тем, как свободное пространство контейнера распределяется между элементами в гибком контейнере. Оно определяет, насколько каждый элемент может "расти" по сравнению с другими элементами. Чем выше значение flex-grow, тем больше пространства займёт элемент.

➡️ Пример:

.container {
  display: flex;
}

.item1 {
  flex-grow: 1;
}

.item2 {
  flex-grow: 2;
}

В этом примере item2 займёт в два раза больше пространства, чем item1.

CodeBase | Frontend | #css

Не нужно мешать, он знает, что делает... 😎

CodeBase | Frontend | #meme

⚡️ Styled Components – библиотека для стилизации React-компонентов: она позволяет создавать пользовательские компоненты с локальными встроенными стилями.

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

➡️ Главные особенности библиотеки:

• Простота обслуживания и отладки. Если нужно внести изменения в стиль, вы делаете это в одном месте – в компоненте. Не нужно искать все вхождения этого стиля на странице и менять их.

• Компонентная стилизация. Все стили привязаны к компонентам, что улучшает организацию кода и упрощает навигацию по нему.

• Отсутствие конфликтов. Если вы случайно используете класс, который уже существует в другом месте на странице, это не вызовет конфликтов или ошибок.

✔️ Главное преимущество: простота инкапсуляции стилей внутри компонента и предотвращение конфликтов.

👩‍💻 GitHub

CodeBase | Frontend | #tool

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

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

🔗 Ссылка

CodeBase | Frontend | #animate

👩‍💻 Как работает метод call() в JavaScript?

Метод call() в JavaScript позволяет вызывать функцию с определённым значением this и переданными аргументами. Это удобно, когда нужно изменить контекст this у функции для её использования с другим объектом.

➡️ Пример:

const person = {
  name: 'Bob',
  introduce(greeting) {
    console.log(`${greeting}, меня зовут ${this.name}!`);
  }
};

const anotherPerson = { name: 'Alice' };

person.introduce.call(anotherPerson, 'Привет'); // 'Привет, меня зовут Alice!'

🗣️ Здесь call() изменяет контекст this функции introduce, вызывая её для объекта anotherPerson.

Метод call() полезен, когда нужно временно привязать функцию к другому объекту.

CodeBase | Frontend | #js

⚡️ Supabase – это платформа для разработки многофункциональных веб-приложений, которая заменяет собой Firebase.

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

➡️ Supabase также предоставляет возможность обработки данных в реальном времени, и набор инструментов для создания ИИ-приложений. Кроме того, платформа поддерживает множество языков программирования, включая Swift и Kotlin.

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

👩‍💻 GitHub

CodeBase | Frontend | #tool

⚡️Check Done SVG Animated — Анимированное подтверждение.

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

🔗 Ссылка

CodeBase | Frontend | #animate

👩‍💻 Как работают переменные 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