🗣 Интернет-магазин сырной продукции

🗂 Категория: Интернет-магазин
💵 Сложность: Очень сложный
📱 Адаптив: ✅
📄 Страницы макета: 17

CodeBase | Frontend

💩 ЛАЙФХАКИ ВЕРСТАЛЬЩИКА 💩

⚡️ Подготовил для вас небольшой список годных ресурсов.

➡️ How To Center in CSS – центрируйте всё

➡️ CodeHouse – крутые подборки готовых решений на CSS и jQuery без плагинов

➡️ Learn Git Branching – интерактивный учебник по Git

➡️ Генератор Flexbox верстки – Конструктор Flexbox

➡️ Генератор Grid верстки – Конструктор Grid

🟢 Сохрани, чтобы не потерять 🟢

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

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

📳 Vibration API 📳

➡️ Предоставляет функцию, которая позволяет вызывать вибрацию на устройстве.

➡️ Метод Navigator.vibrate() используется для управления вибрацией.

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

navigator.vibrate(1000)

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

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

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

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

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

⚡️ТОП-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

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

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

🔗 Ссылка

CodeBase | Frontend

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

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

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

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

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

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

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

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

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

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

CodeBase | Frontend

⚡️ ТОП-3 CSS ФРЕЙМВОРКА ⚡️

1️⃣ Bootstrap — является наиболее распространенным и известным CSS-фреймворком в мире.

🔵 Bootstrap предлагает последовательную и тестируемую кодовую базу для достижения надежных результатов, хотя некоторые могут считать его слишком ограничивающим, поскольку классы Bootstrap могут быстро наводить стиль на HTML-код для front-end разработчиков.

2️⃣ Bulma — это бесплатный CSS-фреймворк с открытым исходным кодом, построенный на Flexbox.

🟣 Его цель – предложить современную, минималистичную альтернативу другим CSS-фреймворкам.

3️⃣ Foundation – это адаптивный фронт-энд фреймворк, предлагающий набор CSS-инструментов, ориентированных на дизайн и доступность на мобильных устройствах.

🔴 Foundation включает разнообразные плагины JavaScript для добавления интерактивности в ваши веб-приложения.

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

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

⚡️ Макет сайта "𝗖𝗬𝗕𝗘𝗥"

🔵 Категория: интернет-магазин электроники

🔵 Страницы: многостраничный

🔵 Адаптив: есть

🔗 Ссылка на макет

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

CodeBase | Frontend

💩Пет-проект: Веб-сайт-портфолио

Добавив свой веб-сайт в портфолио, вы демонстрируете свои навыки и объясняете дизайн. Это интересно для работодателя.
Важно объяснить логику выбора дизайна и описать, как вы улучшили SEO и производительность сайта.

➡️ Сложность: ⭐️ ⭐️ ⭐️ ⭐️⭐️

➡️ Технологии: HTML, CSS, Vanilla JavaScript

⚡️ Получить вдохновение

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

CodeBase | Frontend

⚡️ Undesign ⚡️

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

🔗 Ссылка

CodeBase | Frontend

⚡️⚡️ Anime.js — библиотека для анимаций ⚡️⚡️

➡️ Anime.js — удобная и мощная библиотека для создания простых анимаций, работающая с CSS- и SVG-свойствами, DOM-атрибутами и JavaScript-объектами.

🟢 Обладает компактным размером всего 10 кБ и простой документацией, доступной даже начинающим.

🟢 Её встроенная система пошаговой анимации упрощает процесс создания различных эффектов, таких как рябь, наложение, морфинг, вращение и масштабирование.

🟢 Поддерживается плавная и сферическая анимация. Anime.js позволяет анимировать несколько CSS-свойств в ключевых кадрах с различными таймингами для одного элемента HTML.

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

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

🔗 Документация

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

CodeBase | Frontend