⚡️Jumping Coin Preloader — Анимированная загрузка в виде прыгающей монетки.

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

🔗 Ссылка

CodeBase | Frontend | #animate

⚙ 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

⚡️ Brackets — Бесплатный и открытый инструмент, оптимизированный для веб-разработки.

✔️ Плюсы

🔵Live preview. Главная фишка Brackets — возможность видеть изменения в реальном времени в браузере, что делает процесс разработки понятнее.
🔵Поддержка нескольких языков. Идеально подходит для работы с HTML, CSS и JavaScript, что делает его отличным выбором для фронтенд-разработчиков.
🔵Расширения и плагины. Поддержка разнообразных расширений и плагинов позволяет пользователям настраивать редактор под свои нужды.
🔵Простой и удобный интерфейс. У Brackets чистый, минималистичный интерфейс, что облегчает работу с кодом.
🔵Бесплатный и открытый исходный код. Brackets доступен бесплатно, и его исходный код открыт для сообщества.

❌ Минусы

🔵Низкая производительность. В некоторых случаях Brackets может быть медленнее по сравнению с другими редакторами кода, особенно при работе с большими файлами.
🔵Редкий выход обновлений. Не обновляется так же часто, как некоторые другие редакторы, что может замедлять внедрение новых функций и исправление ошибок.

➡️ Сайт

CodeBase | Frontend | #tool

⚡️Interactive Gradient — Сцена с интерактивным фоном в виде градиента.

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

🔗 Ссылка

CodeBase | Frontend | #animate

👩‍💻 Объект

Кроме примитивных типов в JavaScript существуют и сложные — например, объект.

🗣️ Объект (object) — это набор свойств. Каждое свойство состоит из названия и значения. Название может быть строкой или символом, а значение может быть любым.

➡️ Объекты в JavaScript используются повсюду, особенно для хранения данных. Для уверенной работы с объектами необходимо знать, как создавать объект, как его изменять и как читать значения свойств.

Пустой объект без свойств можно создать парой фигурных скобок:

const cat = {}

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

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

CodeBase | Frontend | #js

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

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

🔗 Ссылка

CodeBase | Frontend | #animate

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

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

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

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

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

* {
  box-sizing: border-box;
}

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

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

CodeBase | Frontend | #css

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

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

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

🔗 Ссылка

CodeBase | Frontend | #animate

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

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

🔗 Ссылка

CodeBase | Frontend | #animate