CodeBase | Frontend

⚡️⚡️ Anime.js — библиотека для анимаций ⚡️⚡️ ➡️ Anime.js — удобная и мощная библиотека для создания простых анимаций, работающая с CSS- и SVG-свойствами, DOM-атрибутами и JavaScript-объектами. 🟢 Обладает компактным размером всего 10 кБ и простой документацией, доступной даже начинающим. 🟢 Её встроенная система пошаговой анимации упрощает процесс создания различных эффектов, таких как рябь, наложение, морфинг, вращение и масштабирование. 🟢 Поддерживается плавная и сферическая анимация. Anime.js позволяет анимировать несколько CSS-свойств в ключевых кадрах с различными таймингами для одного элемента HTML. 🟢 Отлично подходит для разработки простых сценариев, включая крутящиеся элементы, интерактивные анимации и различные переходы. 🟢 Кроме того, в библиотеке есть встроенные функции контроля, позволяющие управлять воспроизведением, приостановкой, реверсом и запуском эффектов синхронно. 🔗 Документация

Если понравился пост, добавь 🔥🔥🔥

CodeBase | Frontend

⚡️ Undesign ⚡️ Крутая подборка сниппетов кода, цветов, градиентов, шрифтов, различных иконок и анимации – в общем всяких полезностей для фронтендеров. 🔗 Ссылка CodeBase | Frontend

💩Пет-проект: Веб-сайт-портфолио Добавив свой веб-сайт в портфолио, вы демонстрируете свои навыки и объясняете дизайн. Это интересно для работодателя. Важно объяснить логику выбора дизайна и описать, как вы улучшили SEO и производительность сайта. ➡️ Сложность: ⭐️ ⭐️ ⭐️ ⭐️⭐️ ➡️ Технологии: HTML, CSS, Vanilla JavaScript ⚡️ Получить вдохновение

Если вам понравился пост и его стиль, добавь 🔥 🔥 🔥

CodeBase | Frontend

⚡️ Макет сайта "𝗖𝗬𝗕𝗘𝗥" 🔵 Категория: интернет-магазин электроники 🔵 Страницы: многостраничный 🔵 Адаптив: есть 🔗 Ссылка на макет

Если понравился макет, добавь 🔥🔥🔥

CodeBase | Frontend

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

💩Определяем момент, когда пользователь переключает вкладки браузера и изменяем заголовок страницы. Также этот трюк можно реализовать с помощью Page Visibility API:

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

});

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

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

⚡️ ТОП-3 CSS ФРЕЙМВОРКА ⚡️ 1️⃣ Bootstrap — является наиболее распространенным и известным CSS-фреймворком в мире. 🔵 Bootstrap предлагает последовательную и тестируемую кодовую базу для достижения надежных результатов, хотя некоторые могут считать его слишком ограничивающим, поскольку классы Bootstrap могут быстро наводить стиль на HTML-код для front-end разработчиков. 2️⃣ Bulma — это бесплатный CSS-фреймворк с открытым исходным кодом, построенный на Flexbox. 🟣 Его цель – предложить современную, минималистичную альтернативу другим CSS-фреймворкам. 3️⃣ Foundation – это адаптивный фронт-энд фреймворк, предлагающий набор CSS-инструментов, ориентированных на дизайн и доступность на мобильных устройствах. 🔴 Foundation включает разнообразные плагины JavaScript для добавления интерактивности в ваши веб-приложения.

Если понравился пост, поставь 🔥🔥🔥

CodeBase | Frontend

⚡️ ТОП CSS-библиотек для анимации⚡️ 1️⃣ Animate.css — библиотека содержит более ста разнообразных эффектов, включая появление и исчезание элементов, вращение, изменение размеров и эффект "дребезг". 🟢 Она может быть использована для выделения текста, подсказок и других элементов, на которые нужно привлечь внимание. 2️⃣ cssanimation.io — предлагает более 70 анимационных эффектов на CSS. 🟢 Также поддерживает Greensock, широко используемую библиотеку для анимации на JavaScript. 3️⃣ Animista — в библиотеке доступен набор анимаций, которые можно настраивать прямо в редакторе интерфейса. 🟢 Вы выбираете желаемый эффект и регулируете параметры, такие как скорость, задержка и продолжительность анимации. 4️⃣ Magic CSS — небольшая библиотека предлагает набор CSS-анимаций, которые можно активировать при возникновении событий в браузере. 🟢 Такие эффекты могут быть использованы, например, для эффектного отображения другого элемента при клике на кнопку. 5️⃣ CSS Wand — в этой библиотеке собраны анимации для кнопок, индикаторов загрузки и полей ввода. CodeBase | Frontend

⚡️ Крутое дизайнерское решение для ресторана. Меню для сайта, в виде...туалетной бумаги. 🔗 Ссылка CodeBase | Frontend

⚡️ТОП-4 инструмента для разработки ИИ на JS ⚡️ ➡️ AI.JSX — разработанный Fixie, является динамичным фреймворком для создания разговорных приложений с использованием JavaScript и JSX, оптимизированным для проектов на React. 🔵 Он выделяется среди других инструментов для ИИ благодаря надежной поддержке инжиниринга подсказок и простой интеграции с внешними API. ➡️ TensorFlow.js — адаптация библиотеки TensorFlow от Google для JavaScript, специально созданная для использования в вебе и Node.js, чтобы внедрить возможности машинного обучения в браузеры и серверные приложения. 🔵 Одним из ключевых преимуществ TensorFlow.js является способность запуска моделей МО прямо в браузере. ➡️ Brain.js предлагает простой способ создания нейронных сетей на JavaScript, подходит для браузера и Node.js. 🔵 Основное применение Brain.js — автоматизация процессов, таких как анализ текста, объединение PDF, обработка изображений и другие задачи, связанные с обработкой данных. ➡️ Tabnine — помощник по автозаполнению кода на основе ИИ, улучшающий опыт программирования. 🔵 Он ускоряет разработку и поддерживает целостность кода, предлагая фрагменты кода, завершения функций и блоки кода на основе естественных языковых комментариев.

Если понравился пост, добавь 🔥🔥🔥

CodeBase | Frontend

👩‍💻 GULP.JS 👩‍💻 ⚡️ Gulp - инструмент для автоматизации задач веб-разработки, включая создание сервера, минификацию кода, работу с изображениями, деплой и многое другое. 🔵 Запуск веб-сервера с автоматическим обновлением страницы при сохранении кода, использование препроцессоров для JS, CSS, HTML, минификация кода, управление файлами, работа с изображениями, деплой, подключение плагинов Node.js и Gulp для автоматизации задач веб-разработки. 🔵 Gulp и связанные с ним утилиты могут успешно применяться для выполнения практически любых задач при разработке проектов различного масштаба - от небольших сайтов до крупных проектов. ✔️ Установка

Заранее установите Node.js Проверьте его наличие, введя команду: node —v

1️⃣ После установки Node.js, устанавливаем Gulp, выполнив команду:

npm install -g gulp

2️⃣ Создайте новую директорию для вашего проекта и перейдите в нее через командную строку. 3️⃣ Далее установите Gulp локально в вашем проекте, выполнив команду:

npm install gulp --save-dev

4️⃣ Создайте файл gulpfile.js в корневой директории вашего проекта. В нем вы будете описывать задачи для Gulp. 5️⃣ Теперь можно использовать Gulp для автоматизации задач в вашем проекте. Вы можете запустить Gulp, выполнив команду gulp в корневой директории проекта.

Если понравилась инфа, добавь 🔥🔥🔥

CodeBase | Frontend

📳 Vibration API 📳 ➡️ Предоставляет функцию, которая позволяет вызывать вибрацию на устройстве. ➡️ Метод Navigator.vibrate() используется для управления вибрацией. 🔵 Например, для создания вибросигнала длительностью в 1 секунду можно использовать

navigator.vibrate(1000)

🔵 Чтобы создать последовательность вибросигнала длительностью 0.5 секунды, затем паузу в 1 секунду, и затем вибросигнал длительностью 0.3 секунды, можно использовать

navigator.vibrate([500, 1000, 300])

🔵 Если передать значение 0 или пустой массив в метод, или массив содержащий только нули, это отменит любой текущий шаблон вибрации.

Если понравилась инфа, сохрани, чтоб не потерять)) И добавь 🔥🔥🔥

CodeBase | Frontend

⚙️ Плагин для VS Code: CSS Peek Во время работы с версткой, часто приходится переключаться между html и css кодом. И если с небольшими проектами это терпимо, то с более менее объемными - несколько не удобно. Так вот, CSS Peek может облегчить работу и сделать ее более удобной и эффективной. ⚙️ Преимущества плагина: ➡️ Легкий поиск и переход к определению CSS классов, а также ID, прямо из html. ➡️ Быстрое редактирование стилей, не теряя времени на поиск нужных селекторов. ➡️ Ускоряет разработку, благодаря удобной навигации и редактированию стилей. 🔗 Установить CSS Peek CodeBase | Frontend

🖼️ Фреймворк 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

⚡️ БИБЛИОТЕКИ JAVASCRIPT ⚡️ 💻 Библиотека — набор кода, который интегрируется в приложение и выполняет определенные функции в соответствии с задачами, порученными разработчикам. ➡️ Обычно библиотека содержит классы и/или функции, которые могут быть использованы разработчиками в своем приложении. Например: 1️⃣ jQuery предоставляет набор функций для работы с DOM, обработки событий и обеспечения клиент-серверного взаимодействия. 🟢 Скачать jQuery с офф сайта библиотеку jQuery 🟢 Забросить в папку на сервере 🟢 Прописать новый путь до вашей библиотеки jQuery ➡️ Пример: <script src="/___dwweb_ru/__template/js/jquery-3.3.1.min.js"></script> 2️⃣ D3 - это библиотека, которая позволяет создавать визуализации, используя SVG. 🔵 Загрузите и распакуйте d3.zip 🔵 Скопируйте полученную папку туда, где вы будете хранить зависимости вашего проекта. 🔵 Ссылка на d3.js (для разработки) или d3.min.js (для производства) в вашем HTML: <script type="text/javascript" src="scripts/d3/d3.js"></script> 3️⃣ React - это библиотека для отображения данных и управления DOM-структурой. ➡️ Установка React локально. npm install react react-dom ➡️ Полный алгоритм действий выглядит так: 🟠 Устанавливаем Node.js на свой компьютер. 🟠 Открываем командную строку / терминал. 🟠 Переходим в папку, где хотим создать свой проект на React. 🟠 Вводим команду npm install react react-dom и нажимаем 'Enter'. 🟠 Установка запущена. 🟠 По окончанию, можно начинать работать с React! CodeBase | Frontend

💩 ЛАЙФХАКИ ВЕРСТАЛЬЩИКА 💩 ⚡️ Подготовил для вас небольшой список годных ресурсов. ➡️ How To Center in CSS – центрируйте всё ➡️ CodeHouse – крутые подборки готовых решений на CSS и jQuery без плагинов ➡️ Learn Git Branching – интерактивный учебник по Git ➡️ Генератор Flexbox верстки – Конструктор Flexbox ➡️ Генератор Grid верстки – Конструктор Grid 🟢 Сохрани, чтобы не потерять 🟢 CodeBase | Frontend