🖼️ Фреймворк VUE.JS 🖼️

Vue — это JavaScript фреймворк для разработки пользовательских интерфейсов, основанный на стандартах HTML, CSS и JavaScript.

Он предлагает декларативную и компонентную модель программирования, что упрощает создание пользовательских интерфейсов различного уровня сложности.

✔️ Установка

➡️ Предварительно установите Node.js

➡️ Прямое включение CDN-файла:

<script src="https://unpkg.com/vue@next"></script>

➡️ Через NPM:

npm -v — проверка наличия npm
npm install vue — установка последней версии vue

➡️ Использование CLI:

npm install -g @vue/cli;

🟢 Пример:

1️⃣ vue create myproject — создание проекта

2️⃣ cd myproject — войдите в папку

3️⃣ npm run dev — локальный запуск вашего проекта

CodeBase | Frontend

⚙️ Плагин для VS Code: CSS Peek

Во время работы с версткой, часто приходится переключаться между html и css кодом. И если с небольшими проектами это терпимо, то с более менее объемными - несколько не удобно.

Так вот, CSS Peek может облегчить работу и сделать ее более удобной и эффективной.

⚙️ Преимущества плагина:

➡️ Легкий поиск и переход к определению CSS классов, а также ID, прямо из html.

➡️ Быстрое редактирование стилей, не теряя времени на поиск нужных селекторов.

➡️ Ускоряет разработку, благодаря удобной навигации и редактированию стилей.

🔗 Установить CSS Peek

CodeBase | Frontend

⚡️ Крутое дизайнерское решение для ресторана.

Меню для сайта, в виде...туалетной бумаги.

🔗 Ссылка

CodeBase | Frontend

⚡️ ТОП CSS-библиотек для анимации⚡️

1️⃣ Animate.css — библиотека содержит более ста разнообразных эффектов, включая появление и исчезание элементов, вращение, изменение размеров и эффект "дребезг".

🟢 Она может быть использована для выделения текста, подсказок и других элементов, на которые нужно привлечь внимание.

2️⃣ cssanimation.io — предлагает более 70 анимационных эффектов на CSS.

🟢 Также поддерживает Greensock, широко используемую библиотеку для анимации на JavaScript.

3️⃣ Animista — в библиотеке доступен набор анимаций, которые можно настраивать прямо в редакторе интерфейса.

🟢 Вы выбираете желаемый эффект и регулируете параметры, такие как скорость, задержка и продолжительность анимации.

4️⃣ Magic CSS — небольшая библиотека предлагает набор CSS-анимаций, которые можно активировать при возникновении событий в браузере.

🟢 Такие эффекты могут быть использованы, например, для эффектного отображения другого элемента при клике на кнопку.

5️⃣ CSS Wand — в этой библиотеке собраны анимации для кнопок, индикаторов загрузки и полей ввода.

CodeBase | Frontend

⚡️⚡️ Emmet Cheat Sheet — онлайн ресурс для Emmet, где вы найдете все команды и сокращения, раскрывающиеся в объемный код и значительно ускоряющие процесс разработки.

🔗 Ссылка

CodeBase | Frontend

⚡️ Что фронтенд-разработчики должны знать о Web 3.0 ⚡️

💩 Обсуждение Web 3.0 возобновилось после презентации Марка Цукерберга о переименовании Facebook в Meta и компании, направленной на создание метавселенной. Это ускорило переход к новой версии интернета.

💩 Web 3.0 связан с метавселенной, блокчейном и криптовалютами, но точное определение часто неясно из-за отсутствия строгого определения. Переход к Web 3.0 может занять много времени. Эра Web 1.0 представляла статические страницы, а Web 2.0 ввела интерактивность.

💩 Web 3.0 делает пользователей владельцами информации через децентрализованные технологии, гарантирующие конфиденциальность. Пользователи становятся анонимными и могут проводить финансовые транзакции с помощью криптовалют. Блокчейн меняет отрасли и устанавливает новый стандарт.

💩 Мы только начинаем переход к Web 3.0, где пользователи станут ключевым фактором.новые умения и понимание цифровых технологий.

CodeBase | Frontend

💩Определяем момент, когда пользователь переключает вкладки браузера и изменяем заголовок страницы.

Также этот трюк можно реализовать с помощью Page Visibility API:

document.addEventListener("visibilitychange", () => {
  document.title = visibilityState;

});

CodeBase | Frontend

💩 Inview Animation - Все анимации созданы при помощи библиотеки gsap.

🔗 Ссылка

CodeBase | Frontend

⚡️ Undesign ⚡️

Крутая подборка сниппетов кода, цветов, градиентов, шрифтов, различных иконок и анимации – в общем всяких полезностей для фронтендеров.

🔗 Ссылка

CodeBase | Frontend

⭐️Анимация: Сердце ⭐️

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

🔗 CodePen

CodeBase | Frontend