CodeBase | Frontend
Kanalga Telegram’da o‘tish
Все самое интересное и полезное у нас 😎 Контакт: @Filgood777 (реклама, сотрудничество) Включи монетизацию своего TG-канала или сайта через РСЯ и получай пассивный доход. Подключиться по https://ya.cc/B2UP8W
Ko'proq ko'rsatish
Tarmoq:1 926
Obunachilar
-324 soatlar
-67 kun
-1630 kun
Postlar arxiv
\n\n➡️ Через NPM:\n\nnpm -v — проверка наличия npm\nnpm install vue — установка последней версии vue\n\n➡️ Использование CLI:\n\nnpm install -g @vue/cli;\n\n🟢 Пример: \n\n1️⃣ vue create myproject — создание проекта\n\n2️⃣ cd myproject — войдите в папку\n\n3️⃣ npm run dev — локальный запуск вашего проекта\n\nCodeBase | Frontend","datePublished":"2024-05-10T05:19:01Z","dateModified":"2024-05-10T05:19:01Z","author":{"@type":"Organization","name":"CodeBase | Frontend","url":"https://telemetr.io/uz/channels/1798973851-codebase_frontend","image":"https://img.telemetr.io/c/1XKjhh/5226818570820900840?ty=x"},"publisher":{"@type":"Organization","name":"CodeBase | Frontend","url":"https://telemetr.io/uz/channels/1798973851-codebase_frontend","image":"https://img.telemetr.io/c/1XKjhh/5226818570820900840?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1048},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":9},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":14}]}}]}
1 926
⚡️ Storyset — бесплатная библиотека настраиваемых иллюстраций для вашего проекта.
➡️ Готовые иллюстрации можно скачать в SVG или PNG формате.
🔗 Ссылка
Сохрани, чтоб не потерять ✔️CodeBase | Frontend
1 926
⚡️⚡️ Anime.js — библиотека для анимаций ⚡️⚡️
➡️ Anime.js — удобная и мощная библиотека для создания простых анимаций, работающая с CSS- и SVG-свойствами, DOM-атрибутами и JavaScript-объектами.
🟢 Обладает компактным размером всего 10 кБ и простой документацией, доступной даже начинающим.
🟢 Её встроенная система пошаговой анимации упрощает процесс создания различных эффектов, таких как рябь, наложение, морфинг, вращение и масштабирование.
🟢 Поддерживается плавная и сферическая анимация. Anime.js позволяет анимировать несколько CSS-свойств в ключевых кадрах с различными таймингами для одного элемента HTML.
🟢 Отлично подходит для разработки простых сценариев, включая крутящиеся элементы, интерактивные анимации и различные переходы.
🟢 Кроме того, в библиотеке есть встроенные функции контроля, позволяющие управлять воспроизведением, приостановкой, реверсом и запуском эффектов синхронно.
🔗 Документация
Если понравился пост, добавь 🔥🔥🔥CodeBase | Frontend
1 926
⚡️ Undesign ⚡️
Крутая подборка сниппетов кода, цветов, градиентов, шрифтов, различных иконок и анимации – в общем всяких полезностей для фронтендеров.
🔗 Ссылка
CodeBase | Frontend
1 926
💩Пет-проект: Веб-сайт-портфолио
Добавив свой веб-сайт в портфолио, вы демонстрируете свои навыки и объясняете дизайн. Это интересно для работодателя.
Важно объяснить логику выбора дизайна и описать, как вы улучшили SEO и производительность сайта.
➡️ Сложность: ⭐️ ⭐️ ⭐️ ⭐️⭐️
➡️ Технологии: HTML, CSS, Vanilla JavaScript
⚡️ Получить вдохновение
Если вам понравился пост и его стиль, добавь 🔥 🔥 🔥CodeBase | Frontend
1 926
⚡️ Макет сайта "𝗖𝗬𝗕𝗘𝗥"
🔵 Категория: интернет-магазин электроники
🔵 Страницы: многостраничный
🔵 Адаптив: есть
🔗 Ссылка на макет
Если понравился макет, добавь 🔥🔥🔥CodeBase | Frontend
1 926
💩 Inview Animation - Все анимации созданы при помощи библиотеки gsap.
🔗 Ссылка
CodeBase | Frontend
1 926
💩Определяем момент, когда пользователь переключает вкладки браузера и изменяем заголовок страницы.
Также этот трюк можно реализовать с помощью Page Visibility API:
document.addEventListener("visibilitychange", () => {
document.title = visibilityState;
});
1 926
⚡️ Что фронтенд-разработчики должны знать о 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
1 926
⚡️⚡️ Emmet Cheat Sheet — онлайн ресурс для Emmet, где вы найдете все команды и сокращения, раскрывающиеся в объемный код и значительно ускоряющие процесс разработки.
🔗 Ссылка
CodeBase | Frontend
1 926
⚡️ ТОП-3 CSS ФРЕЙМВОРКА ⚡️
1️⃣ Bootstrap — является наиболее распространенным и известным CSS-фреймворком в мире.
🔵 Bootstrap предлагает последовательную и тестируемую кодовую базу для достижения надежных результатов, хотя некоторые могут считать его слишком ограничивающим, поскольку классы Bootstrap могут быстро наводить стиль на HTML-код для front-end разработчиков.
2️⃣ Bulma — это бесплатный CSS-фреймворк с открытым исходным кодом, построенный на Flexbox.
🟣 Его цель – предложить современную, минималистичную альтернативу другим CSS-фреймворкам.
3️⃣ Foundation – это адаптивный фронт-энд фреймворк, предлагающий набор CSS-инструментов, ориентированных на дизайн и доступность на мобильных устройствах.
🔴 Foundation включает разнообразные плагины JavaScript для добавления интерактивности в ваши веб-приложения.
Если понравился пост, поставь 🔥🔥🔥CodeBase | Frontend
1 926
⚡️ ТОП CSS-библиотек для анимации⚡️
1️⃣ Animate.css — библиотека содержит более ста разнообразных эффектов, включая появление и исчезание элементов, вращение, изменение размеров и эффект "дребезг".
🟢 Она может быть использована для выделения текста, подсказок и других элементов, на которые нужно привлечь внимание.
2️⃣ cssanimation.io — предлагает более 70 анимационных эффектов на CSS.
🟢 Также поддерживает Greensock, широко используемую библиотеку для анимации на JavaScript.
3️⃣ Animista — в библиотеке доступен набор анимаций, которые можно настраивать прямо в редакторе интерфейса.
🟢 Вы выбираете желаемый эффект и регулируете параметры, такие как скорость, задержка и продолжительность анимации.
4️⃣ Magic CSS — небольшая библиотека предлагает набор CSS-анимаций, которые можно активировать при возникновении событий в браузере.
🟢 Такие эффекты могут быть использованы, например, для эффектного отображения другого элемента при клике на кнопку.
5️⃣ CSS Wand — в этой библиотеке собраны анимации для кнопок, индикаторов загрузки и полей ввода.
CodeBase | Frontend
1 926
⚡️ Крутое дизайнерское решение для ресторана.
Меню для сайта, в виде...туалетной бумаги.
🔗 Ссылка
CodeBase | Frontend
1 926
⚡️ТОП-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
1 926
👩💻 GULP.JS 👩💻
⚡️ Gulp - инструмент для автоматизации задач веб-разработки, включая создание сервера, минификацию кода, работу с изображениями, деплой и многое другое.
🔵 Запуск веб-сервера с автоматическим обновлением страницы при сохранении кода, использование препроцессоров для JS, CSS, HTML, минификация кода, управление файлами, работа с изображениями, деплой, подключение плагинов Node.js и Gulp для автоматизации задач веб-разработки.
🔵 Gulp и связанные с ним утилиты могут успешно применяться для выполнения практически любых задач при разработке проектов различного масштаба - от небольших сайтов до крупных проектов.
✔️ Установка
Заранее установите Node.js Проверьте его наличие, введя команду: node —v1️⃣ После установки Node.js, устанавливаем Gulp, выполнив команду:
npm install -g gulpnpm install gulp --save-devgulpfile.js в корневой директории вашего проекта. В нем вы будете описывать задачи для Gulp.
5️⃣ Теперь можно использовать Gulp для автоматизации задач в вашем проекте. Вы можете запустить Gulp, выполнив команду gulp в корневой директории проекта.
Если понравилась инфа, добавь 🔥🔥🔥CodeBase | Frontend
1 926
📳 Vibration API 📳
➡️ Предоставляет функцию, которая позволяет вызывать вибрацию на устройстве.
➡️ Метод Navigator.vibrate() используется для управления вибрацией.
🔵 Например, для создания вибросигнала длительностью в 1 секунду можно использовать
navigator.vibrate(1000)🔵 Чтобы создать последовательность вибросигнала длительностью 0.5 секунды, затем паузу в 1 секунду, и затем вибросигнал длительностью 0.3 секунды, можно использовать
navigator.vibrate([500, 1000, 300])🔵 Если передать значение 0 или пустой массив в метод, или массив содержащий только нули, это отменит любой текущий шаблон вибрации.
Если понравилась инфа, сохрани, чтоб не потерять)) И добавь 🔥🔥🔥CodeBase | Frontend
1 926
⚙️ Плагин для VS Code: CSS Peek
Во время работы с версткой, часто приходится переключаться между html и css кодом. И если с небольшими проектами это терпимо, то с более менее объемными - несколько не удобно.
Так вот,
CSS Peek может облегчить работу и сделать ее более удобной и эффективной.
⚙️ Преимущества плагина:
➡️ Легкий поиск и переход к определению CSS классов, а также ID, прямо из html.
➡️ Быстрое редактирование стилей, не теряя времени на поиск нужных селекторов.
➡️ Ускоряет разработку, благодаря удобной навигации и редактированию стилей.
🔗 Установить CSS Peek
CodeBase | Frontend1 926
🖼️ Фреймворк 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
