⚡️ Trigger.dev – открытая библиотека для создания и управления долгосрочными задачами прямо в вашем приложении.

Поддерживает множество фреймворков – Next.js, Remix, Astro, Nest.js, Nuxt и так далее. Trigger.dev позволяет создавать задачи, которые выполняются в фоновом режиме и не требуют постоянного подключения к серверу. Это особенно полезно для задач, которые могут занимать много времени (обработка больших объемов данных, выполнение сложных вычислений или взаимодействие с внешними API).

⚙️ Trigger.dev предлагает три способа управления – веб-хуки, расписание и события:

• Расписание идеально подходит для периодических задач.
• События активируют задание при отправке полезной нагрузки.
• Веб-хуки активируют задания в реальном времени при возникновении определенных событий.

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

👩‍💻 GitHub

CodeBase | Frontend | #tool

⚡️Toggle Pill — Переключатели с несколькими стилями анимаций.

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

🔗 Ссылка

CodeBase | Frontend | #animate

👩‍💻 Универсальный селектор

Универсальный селектор * соответствует абсолютно любому тегу, но не включает псевдоэлементы, вроде ::before и ::after.

➡️ Как пишется

Универсальный селектор очень удобен, если какие-то свойства нужно применить ко всем элементам на сайте.

Некоторые используют универсальный селектор для изменения алгоритма расчёта размеров элементов перед началом вёрстки:

* {
  box-sizing: border-box;
}

⚠️ Учитывайте, что это CSS-правило не будет иметь влияния на псевдоэлементы. Алгоритм расчёта нужно будет менять точечно. Или дополнить селектор, упомянув в нём ::before и ::after:

*,
::before,
::after {
  box-sizing: border-box;
}

CodeBase | Frontend | #css

⚡️ Chart.js – популярная JavaScript-библиотека для создания всевозможных интерактивных и визуально привлекательных графиков и диаграмм.

С помощью Chart.js можно легко и быстро выводить линейные и контурные графики, столбчатые и круговые диаграммы и так далее.

✔️ Главное преимущество: Chart.js позволяет создавать смешанные графики, объединяя несколько типов графиков и диаграмм на одном холсте, и отлично подходит для визуализации больших объемов данных.

🖥 Почитать еще

👩‍💻 GitHub

CodeBase | Frontend | #tool

⚡️Fancy wipe — Анимированное появление текста.

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

🔗 Ссылка

CodeBase | Frontend | #animate

👩‍💻 undefined

Undefined — это тип, состоящий из одного значения undefined. Оно используется, чтобы обозначить, что переменной не присвоено значение.

🗣️ Если переменная инициализирована с помощью let или var и ей не присвоено значение, то JavaScript автоматически устанавливает значение undefined.

➡️ Пример:

JavaScript автоматически устанавливает значение undefined новой переменной:

let name

console.log(name)
// undefined

Также JavaScript автоматически устанавливает значение undefined в аргумент функции, если значение не передали при вызове:

function hello(name) {
  console.log('Привет, ' + name)
}

hello('Витя')
// Привет, Витя
hello()
// Привет, undefined

Вручную установленное undefined используют, чтобы обозначить неизвестное значение.

⚠️ Но будьте аккуратны, когда устанавливаете undefined свойствам объектов. Если у объекта person удалить age, то при обращении к несуществующему свойству также вернётся undefined.

CodeBase | Frontend | #js

⚡️ React Flow и Svelte Flow – библиотеки для создания интерактивных графов и диаграмм на основе узлов в приложениях React и Svelte.

✔️ Библиотеки предоставляют набор компонентов, которые позволяют создавать:

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

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

👩‍💻 GitHub

CodeBase | Frontend | #tool

⚡️Text-Animation-test — Анимированный текст с вращением каждого символа.

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

🔗 Ссылка

CodeBase | Frontend | #animate

👩‍💻 z-index в CSS

z-index — это CSS-свойство, которое определяет порядок размещения элементов на оси z (перекрытие элементов). Оно работает только для элементов, которые позиционируются с использованием position: relative, absolute, fixed или sticky.

🗣 Если два элемента перекрываются, то тот, у которого больше значение z-index, будет отображаться поверх другого. Элементы с одинаковым z-index будут отображаться в порядке их расположения в DOM.

➡️ Пример:

<div style="position: relative; z-index: 10;">Верхний элемент</div>
<div style="position: relative; z-index: 5;">Нижний элемент</div>

В этом примере элемент с z-index: 10 будет располагаться поверх элемента с z-index: 5.

⚠️ Но будьте осторожны, z-index работает только в пределах одного контекста наложения. Если родительский элемент имеет z-index, он создает новый контекст наложения, и его дочерние элементы будут ограничены этим контекстом.

CodeBase | Frontend | #css

⚡️ Monaco Editor – встраивает редактор кода в ваше приложение.

Monaco Editor, созданный на базе VS Code, доступен в универсальной и React-версиях. Он поддерживает подсветку синтаксиса, проверку ошибок, автозавершение и различные языки программирования. Внешний вид легко настроить под дизайн сайта.

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

👩‍💻 GitHub

CodeBase | Frontend | #tool

⚡️Slice! — Интересный текст с горизонтальным "разрезом" и эффектом при наведении.

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

🔗 Ссылка

CodeBase | Frontend | #animate

👩‍💻 Proxy в JavaScript

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

🔍 Как это работает? Proxy создаёт «обёртку» вокруг объекта, которая перехватывает любые обращения к нему через специальные «ловушки» (traps). Это позволяет реализовывать различные сценарии: от валидации данных до логирования.

➡️ Пример:

let target = {};
let proxy = new Proxy(target, {
  set(obj, prop, value) {
    if (typeof value === 'number') {
      obj[prop] = value;
    } else {
      console.log(`Значение ${prop} должно быть числом!`);
    }
  }
});

proxy.age = 30; // работает
proxy.age = "не число"; // ошибка

Здесь мы создали прокси для объекта target, который разрешает устанавливать только числовые значения. В случае ошибки выводится сообщение.

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

• Валидация данных в объектах.
• Логирование действий.
• Защита от случайного изменения данных.

CodeBase | Frontend | #js

⚡️ Novu – открытая инфраструктура для управления различными уведомлениями.

Novu предоставляет унифицированный API, который упрощает отправку уведомлений через множество каналов, включая внутрипрограммные, push, email, SMS и чат.

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

• Единый API для всех провайдеров сообщений (приложение, Email, SMS, Push, чат).
• Простота управления уведомлениями по нескольким каналам.
• Встроенная CMS для создания продвинутых интерфейсов.
• Простые установка и интеграция в приложение.
• Отладка и анализ системы доставки сообщений в одной панели управления.
• Встроенный центр уведомлений с обновлениями в реальном времени.

✔️ Главное преимущество: Novu – очень удобный инструмент для улучшения взаимодействия с пользователями, доступный для использования в проектах на Node.js, PHP, Go, Ruby, Kotlin, Elixir, Rust, Python и Java.

👩‍💻 GitHub

CodeBase | Frontend | #tool

⚡️Hover Glyph Button — Кнопка с интересным эффектом символов при наведении.

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

🔗 Ссылка

CodeBase | Frontend | #animate

👩‍💻 Переменные CSS (Custom Properties)

Переменные CSS — это мощный инструмент, который позволяет создавать и переопределять значения стилей динамически. С их помощью можно легко управлять стилями через CSS, сохраняя повторяемые значения в одном месте и изменяя их в зависимости от условий.

🔍 Как это работает? Переменные CSS объявляются с префиксом -- внутри селектора и могут использоваться во всех правилах этого селектора. Для их использования применяется функция var().

➡️ Пример:

:root {
  --main-color: #3498db;
  --padding: 10px;
}

.container {
  background-color: var(--main-color);
  padding: var(--padding);
}

.container:hover {
  --main-color: #e74c3c;
  background-color: var(--main-color);
}

В этом примере мы создали две переменные --main-color и --padding, которые используются для фона и отступов. При наведении на элемент .container цвет фона изменяется на другой, благодаря изменению значения переменной.

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

• Централизованное управление цветами и шрифтами.
• Легкое изменение темы (светлая/темная).
• Адаптивные стили на основе пользовательского ввода.

CodeBase | Frontend | #css

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