CodeBase | Frontend

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

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

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

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

⚡️Text-Animation-test — Анимированный текст с вращением каждого символа. Технологии: CSS 🔗 Ссылка CodeBase | Frontend | #animate

💡 Улучшай свои навыки фронтенд-разработки вместе с нами! На нашем канале ты найдешь полезные советы по разработке, разбор кода, задачи и квизы. Каждый день — новый пост, чтобы ты не переставал учиться. 🎯 Не упусти возможность стать лучше — Подписывайся

⚡️ React Flow и Svelte Flow – библиотеки для создания интерактивных графов и диаграмм на основе узлов в приложениях React и Svelte. ✔️ Библиотеки предоставляют набор компонентов, которые позволяют создавать: • визуальные представления рабочих процессов; • интерактивную документацию; • дорожные карты; • карты мыслей; • диаграммы процессов и любых других структур, основанных на графах. 🗣️ Обе библиотеки осуществляют быстрый рендеринг, перерисовывая только изменившиеся узлы, и гарантируют, что на экране отображаются лишь те узлы, которые попадают в текущую область видимости. 👩‍💻 GitHub CodeBase | Frontend | #tool

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

⚡️Fancy wipe — Анимированное появление текста. Технологии: CSS 🔗 Ссылка CodeBase | Frontend | #animate

⚡️Fancy wipe — Анимированное появление текста. Технологии: CSS 🔗 Ссылка CodeBase | Frontend | #animate

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

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

✔️ Главное преимущество: Chart.js позволяет создавать смешанные графики, объединяя несколько типов графиков и диаграмм на одном холсте, и отлично подходит для визуализации больших объемов данных. 🖥 Почитать еще 👩‍💻 GitHub CodeBase | Frontend | #tool

👩‍💻 Универсальный селектор Универсальный селектор * соответствует абсолютно любому тегу, но не включает псевдоэлементы, вроде ::before и ::after. ➡️ Как пишется Универсальный селектор очень удобен, если какие-то свойства нужно применить ко всем элементам на сайте. Некоторые используют универсальный селектор для изменения алгоритма расчёта размеров элементов перед началом вёрстки:

* {
  box-sizing: border-box;
}

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

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

CodeBase | Frontend | #css

⚡️Toggle Pill — Переключатели с несколькими стилями анимаций. Технологии: CSS 🔗 Ссылка CodeBase | Frontend | #animate

😮 Добавлена новая база слитых курсов на 800ГБ: Python: https://t.me/+QPSH2IcGu4w5ODky Frontend и Web: https://t.me/+MiJVQSyUlDNjODky Программирование: https://t.me/+opj2LZT23ddiZDli Графика и дизайн: https://t.me/+vrZ8dhdUEXM3YmQy

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

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

⚙️ Trigger.dev предлагает три способа управления – веб-хуки, расписание и события: • Расписание идеально подходит для периодических задач. • События активируют задание при отправке полезной нагрузки. • Веб-хуки активируют задания в реальном времени при возникновении определенных событий. ✔️ Главное преимущество: библиотека позволяет интегрировать различные сервисы и выполнять автоматизированные действия при возникновении определенных событий. 👩‍💻 GitHub CodeBase | Frontend | #tool

Ребят, в начале или середине своего пути вам часто нужно смотреть на примеры кода и реализацию разных возможностей ⚠️ Это повышает вашу насмотренность, понимание кода, да и вы всегда можете сохранить заготовки себе на будущие проекты Раньше я публиковал множество сайтов. Но теперь есть специальный канал для этого: @code_ready У вас будет все под рукой, с оформленным кодом, примерами, шпаргалками и без занудства ➡️ Так что подписываемся

👩‍💻 Объект Кроме примитивных типов в JavaScript существуют и сложные — например, объект. 🗣️ Объект (object) — это набор свойств. Каждое свойство состоит из названия и значения. Название может быть строкой или символом, а значение может быть любым. ➡️ Объекты в JavaScript используются повсюду, особенно для хранения данных. Для уверенной работы с объектами необходимо знать, как создавать объект, как его изменять и как читать значения свойств. Пустой объект без свойств можно создать парой фигурных скобок:

const cat = {}

✔️ Когда нужно создать объект со свойствами, то их описывают внутри фигурных скобок. Свойства указываются в формате имяСвойства : значение, между свойствами ставится запятая:

const book = {
  title: 'Война и мир',
  author: 'Лев Толстой',
  pages: 1274,
  isFinished: true
}

CodeBase | Frontend | #js

⚡️ IT-обучение теперь в Telegram! В cвязи с недавнем замедлением Ютуба — лучшие обучающие каналы переехали в Telegram Вот каналы для айтишников: 📱 Python: @Python 📱 GitHub: @GitHub 📱 Frontend: @Frontend ⚙️ Backend: @Backend 🤓 Общее айти: @portalToIT 👩‍💻 Java: @Java 👩‍💻 C#: @Csharp 👩‍💻 С/С++: @Cpp 🖥 Базы Данных & SQL: @SQL 👩‍💻 Golang: @Golang 🖥 PHP: @PHP 👩‍💻 Моб. разработка: @MobDev 👩‍💻 Разработка игр: @GameDev 👩‍💻 DevOps: @DevOps 🖥 Data Science: @DataScience 🤔 Хакинг & ИБ: @InfoSec 🐞 Тестирование: @QA 📱 Маркетинг: @Marketing 🖥 Дизайн: @Design ➡️ Сохраняйте себе, чтобы не потерять

⚡️Interactive Gradient — Сцена с интерактивным фоном в виде градиента. Технологии: SVG, SCSS, Babel 🔗 Ссылка CodeBase | Frontend | #animate

⚡️ Brackets — Бесплатный и открытый инструмент, оптимизированный для веб-разработки. ✔️ Плюсы 🔵Live preview. Главная фишка Brackets — возможность видеть изменения в реальном времени в браузере, что делает процесс разработки понятнее. 🔵Поддержка нескольких языков. Идеально подходит для работы с HTML, CSS и JavaScript, что делает его отличным выбором для фронтенд-разработчиков. 🔵Расширения и плагины. Поддержка разнообразных расширений и плагинов позволяет пользователям настраивать редактор под свои нужды. 🔵Простой и удобный интерфейс. У Brackets чистый, минималистичный интерфейс, что облегчает работу с кодом. 🔵Бесплатный и открытый исходный код. Brackets доступен бесплатно, и его исходный код открыт для сообщества. ❌ Минусы 🔵Низкая производительность. В некоторых случаях Brackets может быть медленнее по сравнению с другими редакторами кода, особенно при работе с большими файлами. 🔵Редкий выход обновлений. Не обновляется так же часто, как некоторые другие редакторы, что может замедлять внедрение новых функций и исправление ошибок. ➡️ Сайт CodeBase | Frontend | #tool

🔒 6895 ГБ платного контента для программистов выложили в Telegram Тонны курсов, уроков и видео теперь в открытом доступе: 🖥 Python — 724 ГБ 🖥 Frontend — 981 ГБ 🖥 Backend — 817 ГБ 👩‍💻 Все языки — 4373 ГБ Успей подать заявку, пока не удалили

⚙ Daisy UI Это красивая и простая в использовании библиотека компонентов для Tailwind CSS. Но она не похожа на типичные библиотеки компонентов, Material UI или Mantine UI. Вместо набора компонентов Daisy UI предоставляет набор классов-утилит, которые вы можете использовать для создания своих компонентов, например, btn, btn-primary, modal, modal-box и т. д. ✔️ Установка В вашем проекте должен быть установлен Tailwind CSS. Вы можете использовать его с любым JavaScript-фреймворком или просто с ванильным HTML. Устанавливаем через npm:

npm install daisyui

⚙️ Использование

const App = () => {
    return <button className='btn'>Button</button>
}

Вы можете использовать имена классов для настройки компонентов. Например:

const App = () => {
    return (
        <button className="btn">Button</button>
        <button className="btn btn-neutral">Neutral</button>
        <button className="btn btn-primary">Primary</button>
        <button className="btn btn-link">Link</button>
    )
}

Если хотите попробовать данную библиотеку в действии, переходите по ссылке и ознакомьтесь со всей информации на официальном сайте DaisyUI. 🔗 Сайт DaisyUI CodeBase | Frontend | #css