👩‍💻 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

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