CodeBase | Frontend

😮 Добавлена новая база слитых курсов на 800ГБ: Frontend и Web: https://t.me/+jIc0twfFgKhjZGUy Python: https://t.me/+NPw6iGBn_noxMjI6 Программирование: https://t.me/+c-bCEs1r5L9lMzQy Графика и дизайн: https://t.me/+49RJiQ44W2k2M2Iy

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

.container {
  display: flex;
}

.item1 {
  flex-grow: 1;
}

.item2 {
  flex-grow: 2;
}

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

CodeBase | Frontend | #css

⚡️Very cool animated text — Стильная анимация вращающегося текста по спирали. Технологии: CSS, JavaScript 🔗 Ссылка CodeBase | Frontend | #animate

😒 На одном кодинге уже давно не вывезешь, перспектива 2024 года - Информационная Безопасность Ловите два канала на тему ИБ и хакинга Арсенал Безопасника - Проект по кибербезопасности - сборник лучших инструментов и утилит по OSINT, хакингу и деанону Бункер Хакера - Сборник инструментов, книг, справочников, гайды и ресурсы по информационной безопасности, анонимности и разведки.

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

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

➡️ Основные особенности ClickVote: • Обширный набор стильных компонентов, которые можно настраивать как угодно. • Встроенные хуки для упрощения общих задач фронтенда. • Поддержка темного режима. • Реализация на TypeScript. ✔️ Главное преимущество: большой выбор компонентов и частые обновления библиотеки. 👩‍💻 GitHub CodeBase | Frontend | #tool

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

⚡️Download the Matrix — Кнопка для скачивания с крутой анимацией при нажатии. Технологии: Svg, CSS, JavaScript 🔗 Ссылка CodeBase | Frontend | #animate

Бесплатное обучение фронтенд-разработке с нуля с личной поддержкой от наставника На канале Интенсивный JavaScript разрботчик и действующий тимлид помогает изучить фронтенд на практике Когда-то он работал крупье в казино, а сейчас помогает новичкам попасть в IT и собеседует людей в свою команду С 20 по 23 октября он проводит бесплатный интенсив, где поможет разобраться во фронтенде с нуля Что получите на интенсиве ✅ Напишете свой проект на JS: сайт с аниме ✅ Узнаете, как вам сейчас попасть в сферу, каких ошибок избегать ✅ и получите пошаговый план изучения фронтенда с нуля до трудоустройства или стабильных 50 тысяч на фрилансе Интенсив подойдёт, даже если вы новичок — всё объясняют так, чтобы поняла даже ваша бабушка Подписывайтесь, осталось 30 мест Учить фронтенд можно бесконечно, если не знать, куда копать На интенсиве сократите время на изучение фронтенд-разработки и получите пошаговый план от разработчика, который нанимает новичков в свою команду 👉Участвовать бесплатно 🔥Подписывайтесь и сразу получите мини-курс по основам JavaScript

⚡️ ClickVote – открытая библиотека для простого добавления реакционных компонентов («лайк» , «проголосовать», «поставить оценку») на любой сайт, в no-code и веб-приложения. ➡️ Основные особенности ClickVote: • Предустановленные компоненты для лайков, рейтингов, звезд, плюсов и минусов. • Поддержка различных фреймворков, включая React, Vue и Svelte. • Мгновенная аналитика реакций пользователей. ✔️ Главное преимущество: ClickVote использует технологию WebSockets для обеспечения обновлений лайков, голосований и отзывов в реальном времени. 🔗 Сайт CodeBase | Frontend | #tool

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

⚡️light/dark mode — Стильное переключение темной темы с анимацией. Технологии: Pug, SCSS 🔗 Ссылка CodeBase | Frontend | #animate

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

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

➡️ Основные особенности Nx: • Архитектура монорепозитория – все версии кода и метаданные хранятся в одном месте, что упрощает управление кодовой базой проекта и снижает риск конфликтов при слиянии • Удаленное кэширование. • Автоматизированное и динамическое распределение задач на несколько машин. • Быстрая и оптимизированная CI, чтобы не собирать один и тот же код повторно. ✔️ Главное преимущество: Nx интегрируется с GitHub, GitLab и BitBucket и делает процесс CI более продуктивным, устраняя любые интеграционные сложности между различными инструментами. 👩‍💻 GitHub CodeBase | Frontend | #tool

В IT, как и в жизни, не всегда получается с первого раза Но лучше учиться у профессионалов, чем смотреть кучу бесполезных видео на YouTube IT-минималист — место, где вы найдете все, что нужно для успешного старта в IT: — Бесплатная база знаний — Проверка домашних заданий — Преподаватели — действующие Senior Data Analyst и магистры ФизТеха По делу, без воды и для любого уровня. Подпишись: @it_minimal

👩‍💻 Переменные 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

⚡️Hover Glyph Button — Кнопка с интересным эффектом символов при наведении. Технологии: Svg, CSS, JavaScript 🔗 Ссылка CodeBase | Frontend | #animate

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

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

⚡️Slice! — Интересный текст с горизонтальным "разрезом" и эффектом при наведении. Технологии: Pug, SCSS 🔗 Ссылка CodeBase | Frontend | #animate

Бесплатный практический вебинар: Профессия «Frontend-разработчик». ⏰ Когда: 17 октября в 19:00 по мск. Погрузитесь в решение реальной задачи и напишите мини-игру, которая работает прямо в браузере 🎮 Расскажем, что ждут работодатели от джунов, какие есть грейды во фронтенд-разработке и на какую зарплату рассчитывать в перспективе. Какие JS фреймворки учить: Vue, React, а может, Angular? Задайте вопросы опытному спикеру, сделайте первый шаг в направлении новой профессии. 🎁 Всем, кто зарегистрировался - Гайд «Как заговорить на сленге IT-специалистов», а каждому участнику - Карта компетенций начинающего Frontend-разработчика.

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

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

✔️ Главное преимущество: позволяет легко и просто встроить адаптивный и полностью настраиваемый редактор кода в ваше веб-приложение. 👩‍💻 GitHub CodeBase | Frontend | #tool