Как сделать кастомный Semi Donut Chart с помощью SVG
Semi Donut Chart — одна из форм представления отчётов в виде полукруглой диаграммы. Используется в том случае, когда важна не математическая точность, а наглядность.
Если вы хотите сделать интересный Semi Donut Chart без использования библиотек по типу Chart.js, то этот туториал для вас.
#vue #html #charts
Semi Donut Chart — одна из форм представления отчётов в виде полукруглой диаграммы. Используется в том случае, когда важна не математическая точность, а наглядность.
Если вы хотите сделать интересный Semi Donut Chart без использования библиотек по типу Chart.js, то этот туториал для вас.
#vue #html #charts
👍7
Изучение Vue.js в 2023 году: дорожная карта разработчика
Vue.js — это популярный JavaScript-фреймворк для создания пользовательских интерфейсов.
Для того, чтобы освоить его нужно изучить не только технологии, которые касаются непосредственно Vue.js, но и уметь работать с инструментами сборки вроде менеджеров пакетов и Vite, владеть CSS на уровне архитектуры и препроцессоров, управлять состоянием и многое другое.
Дорожная карта с подробными объяснениями каждого пункта ждёт вас по ссылке:
https://tproger.ru/articles/izuchenie-vue-js-v-2021-godu-dorozhnaja-karta-razrabotchika/
#vue #roadmap
Vue.js — это популярный JavaScript-фреймворк для создания пользовательских интерфейсов.
Для того, чтобы освоить его нужно изучить не только технологии, которые касаются непосредственно Vue.js, но и уметь работать с инструментами сборки вроде менеджеров пакетов и Vite, владеть CSS на уровне архитектуры и препроцессоров, управлять состоянием и многое другое.
Дорожная карта с подробными объяснениями каждого пункта ждёт вас по ссылке:
https://tproger.ru/articles/izuchenie-vue-js-v-2021-godu-dorozhnaja-karta-razrabotchika/
#vue #roadmap
👍11💩5🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Анимация появления и исчезновения элемента на Vue.js
Привет, на связи админ! Не так давно у нас на канале выходил пост на тему анимации элементов на React.
В комментариях наш подписчик @tkenz попросил выпустить материал по этой теме, только уже на Vue.js.
И вот, что мне удалось найти.
Здесь автор затронул и анимацию первоначальной отрисовки, и javaScript-хуки, и режимы переходов и многое другое. Так что обязательно прочитайте её, пригодится:
https://tprg.ru/RHC9
#vue
Привет, на связи админ! Не так давно у нас на канале выходил пост на тему анимации элементов на React.
В комментариях наш подписчик @tkenz попросил выпустить материал по этой теме, только уже на Vue.js.
И вот, что мне удалось найти.
Здесь автор затронул и анимацию первоначальной отрисовки, и javaScript-хуки, и режимы переходов и многое другое. Так что обязательно прочитайте её, пригодится:
https://tprg.ru/RHC9
#vue
👍9❤1
Как создать и развернуть библиотеку компонентов Vue в NPM
Если вы в разных проектах используете одну и ту же систему дизайна, эффективнее и быстрее иметь библиотеку компонентов, на которую можно ссылаться для всех ваших компонентов в разных проектах.
В этой статье автор подробно разобрал, как использовать этот лайфхак на практике:
https://habr.com/ru/articles/678274/
#vue
Если вы в разных проектах используете одну и ту же систему дизайна, эффективнее и быстрее иметь библиотеку компонентов, на которую можно ссылаться для всех ваших компонентов в разных проектах.
В этой статье автор подробно разобрал, как использовать этот лайфхак на практике:
https://habr.com/ru/articles/678274/
#vue
👍6❤1😁1
Создание приложения погоды на Vue.js
Отличный урок как раз к выходным. Если думали над пет-проектом, то вот интересный вариант: приложение погоды на Vue JS, Open Weather Map API и restful api для получения данных о погоде.
Подробнее:
https://youtu.be/JLc-hWsPTUY
#видео #vue
Отличный урок как раз к выходным. Если думали над пет-проектом, то вот интересный вариант: приложение погоды на Vue JS, Open Weather Map API и restful api для получения данных о погоде.
Подробнее:
https://youtu.be/JLc-hWsPTUY
#видео #vue
❤12👍1👎1
SSR и SEO в SPA
Представьте себе ситуацию: у вас есть SPA с рендерингом на клиенте, и вы хотите, чтобы содержимое тега
Эта статья расскажет, как добавить server side Open Graph и другие SEO-теги в ваше приложение без необходимости мигрировать на SSR фреймворк.
#spa #seo #vue
Представьте себе ситуацию: у вас есть SPA с рендерингом на клиенте, и вы хотите, чтобы содержимое тега
<head> менялось в зависимости от URL. Эта статья расскажет, как добавить server side Open Graph и другие SEO-теги в ваше приложение без необходимости мигрировать на SSR фреймворк.
#spa #seo #vue
❤5👎1
Как типизировать Vuex Store
Лидерство среди глобальных хранилищ состояний занимает Pinia, и она даже стала стандартом по умолчанию для всей экосистемы Vue. Но Vuex все ещё жив и активно используется.
В статье автор объясняет, зачем нужна типизация state и почему предпочтительнее использовать Pinia. Он демонстрирует, как задать типы для mutations, actions и getters.
В результате вы получите 100% типобезопасный Vuex, избегая при этом путаницы в сложных объявлениях типов.
#vue #pinia #typescript
Лидерство среди глобальных хранилищ состояний занимает Pinia, и она даже стала стандартом по умолчанию для всей экосистемы Vue. Но Vuex все ещё жив и активно используется.
В статье автор объясняет, зачем нужна типизация state и почему предпочтительнее использовать Pinia. Он демонстрирует, как задать типы для mutations, actions и getters.
В результате вы получите 100% типобезопасный Vuex, избегая при этом путаницы в сложных объявлениях типов.
#vue #pinia #typescript
👍6👎2
Разработчики фреймворка Vue напомнили, что цикл поддержки Vue 2 завершается в конце 2023 года
В блоге Vue рассказали, что 31 декабря 2023 года заканчивается цикл поддержки Vue 2. Разработчикам следует перейти на актуальную версию.
После 31 декабря 2023 года Vue 2 перестанет получать новые функции, исправления ошибок и обновления. Устаревшую версию фреймворка не будут удалять из официальных каналов распространения.
Кроме того, следующие npm-пакеты будут отмечены как устаревшие:
— все основные и второстепенные версии ядра Vue 2;
— версии vue-router, поддерживающие работу только с Vue 2;
— версии vuex, поддерживающие только Vue 2.
Для тех, кто не может в ближайшее время совершить миграцию на Vue 3, разработчики рекомендуют:
— обновиться до версии 2.7.16, которая выйдет в конце этого месяца и будет содержать в себе несколько важных исправлений;
— если в проекте строгие требования к безопасности, то можно перейти на версию Vue 2 NES (Never-Ending Support) от HeroDevs.
Ох уж этот дивный мир JS, где разработчики переписывают с нуля каждый фреймворк без обратной совместимости...
#vue
В блоге Vue рассказали, что 31 декабря 2023 года заканчивается цикл поддержки Vue 2. Разработчикам следует перейти на актуальную версию.
После 31 декабря 2023 года Vue 2 перестанет получать новые функции, исправления ошибок и обновления. Устаревшую версию фреймворка не будут удалять из официальных каналов распространения.
Кроме того, следующие npm-пакеты будут отмечены как устаревшие:
— все основные и второстепенные версии ядра Vue 2;
— версии vue-router, поддерживающие работу только с Vue 2;
— версии vuex, поддерживающие только Vue 2.
Для тех, кто не может в ближайшее время совершить миграцию на Vue 3, разработчики рекомендуют:
— обновиться до версии 2.7.16, которая выйдет в конце этого месяца и будет содержать в себе несколько важных исправлений;
— если в проекте строгие требования к безопасности, то можно перейти на версию Vue 2 NES (Never-Ending Support) от HeroDevs.
Ох уж этот дивный мир JS, где разработчики переписывают с нуля каждый фреймворк без обратной совместимости...
#vue
👍13❤1
Old but gold: Сквозь тернии к core-у, или процесс компиляции Vue
Сегодня Vue пользуется огромной популярностью, успешно конкурируя с React. У него есть и удобные шаблоны, и однофайловые компоненты, и хранилище состояний и многое другое прямо «из коробки».
Но как это всё работает и компилируется? В этой статье вы найдёте ответ: https://habr.com/ru/companies/nordclan/articles/690522/
#фронтенд #vue
Сегодня Vue пользуется огромной популярностью, успешно конкурируя с React. У него есть и удобные шаблоны, и однофайловые компоненты, и хранилище состояний и многое другое прямо «из коробки».
Но как это всё работает и компилируется? В этой статье вы найдёте ответ: https://habr.com/ru/companies/nordclan/articles/690522/
#фронтенд #vue
👍4
RUINSWORD: Многопользовательский шутер с открытым миром для браузера на JS/TS, Three и Vue
Вот по-настоящему амбициозный проект, который на 100% раскрывает возможности современных браузеров. Несмотря на то, что сейчас доступна только бета-версия, мы с вами можем оценить объём проделанной работы и даже поиграть.
Если вам хочется попробовать игру самостоятельно и вы не боитесь багов бета-версии, то кликайте по ссылке. А если вам интересно узнать технические подробности проекта и почитать с какими трудностями столкнулся разработчик, то залетайте в статью.
#gamedev #vue #threejs
Вот по-настоящему амбициозный проект, который на 100% раскрывает возможности современных браузеров. Несмотря на то, что сейчас доступна только бета-версия, мы с вами можем оценить объём проделанной работы и даже поиграть.
Если вам хочется попробовать игру самостоятельно и вы не боитесь багов бета-версии, то кликайте по ссылке. А если вам интересно узнать технические подробности проекта и почитать с какими трудностями столкнулся разработчик, то залетайте в статью.
#gamedev #vue #threejs
🔥9👍2👎2❤1
Forwarded from Точка входа в программирование
В какую сторону развивается Vue и есть ли ему современные альтернативы
Vue.js входит в топ наиболее популярных инструментов веб-разработки. В числе основных плюсов — доступность, простая архитектура, высокая производительность и гибкие настройки.
Но ему уже более 10 лет. А для IT-продукта это большой срок, за который появились другие проекты. В этой статье мы решили разобраться, есть ли альтернативы у фреймворка, каковы его особенности и преимущества, и как использовать Vue.js с максимальной эффективностью.
#vue
Vue.js входит в топ наиболее популярных инструментов веб-разработки. В числе основных плюсов — доступность, простая архитектура, высокая производительность и гибкие настройки.
Но ему уже более 10 лет. А для IT-продукта это большой срок, за который появились другие проекты. В этой статье мы решили разобраться, есть ли альтернативы у фреймворка, каковы его особенности и преимущества, и как использовать Vue.js с максимальной эффективностью.
#vue
👍7❤2
Динамические layout с Vue jsx: руководство по созданию гибких и удобных в обслуживании пользовательских интерфейсов
Вы когда-нибудь часами настраивали один и тот же layout на нескольких страницах или пытались адаптировать пользовательский интерфейс к изменяющимся данным, чтобы он не ломался? Эти распространённые проблемы могут замедлить процесс разработки и привести к созданию кода, в котором легко допустить ошибку.
Динамические layout решают это проблему и упрощают создание адаптивных интерфейсов. Как их создавать и какими особенностями они обладают, рассказали в этой статье.
#vue #фронтенд
Вы когда-нибудь часами настраивали один и тот же layout на нескольких страницах или пытались адаптировать пользовательский интерфейс к изменяющимся данным, чтобы он не ломался? Эти распространённые проблемы могут замедлить процесс разработки и привести к созданию кода, в котором легко допустить ошибку.
Динамические layout решают это проблему и упрощают создание адаптивных интерфейсов. Как их создавать и какими особенностями они обладают, рассказали в этой статье.
#vue #фронтенд
🤔6
Media is too big
VIEW IN TELEGRAM
Делаем приложение погоды на Vue.js
Если думали над пет-проектом, то вот интересный вариант: приложение погоды на Vue JS, с использованием Open Weather Map API и restful api для получения данных о погоде.
#видео #vue
Если думали над пет-проектом, то вот интересный вариант: приложение погоды на Vue JS, с использованием Open Weather Map API и restful api для получения данных о погоде.
#видео #vue
👍6🔥3👎1
Немного полезной информации о слотах в Vue.js
Слоты — это такие места в компоненте, куда можно вставлять разметку. Они позволяют создавать универсальные компоненты, которые сохраняют логику, но могут быть кастомизированы, как вам надо.
Подробнее о возможностях и пользе слотов: https://habr.com/ru/companies/otus/articles/850204/
#vue #фронтенд
Слоты — это такие места в компоненте, куда можно вставлять разметку. Они позволяют создавать универсальные компоненты, которые сохраняют логику, но могут быть кастомизированы, как вам надо.
Подробнее о возможностях и пользе слотов: https://habr.com/ru/companies/otus/articles/850204/
#vue #фронтенд
👍4❤1👎1
Vue.js с нуля: бесплатный курс из 34 уроков
Обучающий курс по Vue 3, который охватывает всё необходимое для уверенного старта. Вы начнёте с базовой установки и синтаксиса, разберётесь с компонентами и директивами, освоите двунаправленное связывание данных (v-model) и другие ключевые возможности Vue. Пошаговый формат позволит плавно пройти путь от новичка до создания собственного приложения на Vue.js.
#vue@tproger_web #фронтенд@tproger_web
Обучающий курс по Vue 3, который охватывает всё необходимое для уверенного старта. Вы начнёте с базовой установки и синтаксиса, разберётесь с компонентами и директивами, освоите двунаправленное связывание данных (v-model) и другие ключевые возможности Vue. Пошаговый формат позволит плавно пройти путь от новичка до создания собственного приложения на Vue.js.
#vue@tproger_web #фронтенд@tproger_web
YouTube
Бесплатный курс по Vue.js
Курс по Vue.js от сообщества @vuejs_club
👍7💩3
This media is not supported in your browser
VIEW IN TELEGRAM
Пятнашки на Vue
Полезный codepen-проект для тех, кто изучает Vue. Сможете не только изучить алгоритм игры, но и посмотреть, как это реализовано на фреймворке.
https://codepen.io/leemartin/pen/VwmdyNQ
#codepen #vue
Полезный codepen-проект для тех, кто изучает Vue. Сможете не только изучить алгоритм игры, но и посмотреть, как это реализовано на фреймворке.
https://codepen.io/leemartin/pen/VwmdyNQ
#codepen #vue
🔥4
Vue Watch & WatchEffect: не просто реактивность — гибкий контроль
Как работают
#фронтенд #vue
Как работают
watch и watchEffect можно узнать из документации Vue. А в этой статье вы узнаете, как их можно применять не просто для отслеживания переменных, а чтобы контролировать API-запросы, выполнять побочные эффекты и управлять логикой реактивности в Vue, избегая грязного кода.#фронтенд #vue
❤3👍2
Сайт-рулетка для фильмов: создаём интерактивный развлекательный проект на Vue и TMDb
Рулетка для выбора случайного фильма по жанру — отличный способ попрактиковаться в работе со Vue, API и адаптивной верстки.
Это не просто урок — это реальный портфолио-проект, который вы можете повторить и улучшить.
#фронтенд #vue #петпроект
Рулетка для выбора случайного фильма по жанру — отличный способ попрактиковаться в работе со Vue, API и адаптивной верстки.
Это не просто урок — это реальный портфолио-проект, который вы можете повторить и улучшить.
#фронтенд #vue #петпроект
👎3🔥2❤1
Как сделать кастомный Semi Donut Chart с помощью SVG
Semi Donut Chart — одна из форм представления отчётов в виде полукруглой диаграммы. Используется в том случае, когда важна не математическая точность, а наглядность.
Если вы хотите сделать интересный Semi Donut Chart без использования библиотек по типу Chart.js, то этот туториал для вас.
#vue #html #charts
Semi Donut Chart — одна из форм представления отчётов в виде полукруглой диаграммы. Используется в том случае, когда важна не математическая точность, а наглядность.
Если вы хотите сделать интересный Semi Donut Chart без использования библиотек по типу Chart.js, то этот туториал для вас.
#vue #html #charts
🔥3
Nuxt JS - Vue + SSR: вводный курс за 70 минут
Nuxt JS — это фреймворк, который ещё больше упрощает создание веб-приложений с помощью Vue.js. В этом небольшом видео вы изучите основы работы с технологией и сможете создавать свои собственные проекты на Vue с сервер-сайд рендерингом.
#видео #nuxtjs #vue
Nuxt JS — это фреймворк, который ещё больше упрощает создание веб-приложений с помощью Vue.js. В этом небольшом видео вы изучите основы работы с технологией и сможете создавать свои собственные проекты на Vue с сервер-сайд рендерингом.
#видео #nuxtjs #vue
YouTube
Nuxt JS - Vue + SSR (быстрый курс за 70 минут)
Подробнее узнать об обучении в Result School -
https://bit.ly/3A61amv
Получить профессию Frontend разработчика -
https://bit.ly/48MU5F7
Бесплатный курс HTML & CSS - https://bit.ly/3wz4sik
Сделать 5 проектов на JavaScript - https://bit.ly/3wx1YAT
Я в…
https://bit.ly/3A61amv
Получить профессию Frontend разработчика -
https://bit.ly/48MU5F7
Бесплатный курс HTML & CSS - https://bit.ly/3wz4sik
Сделать 5 проектов на JavaScript - https://bit.ly/3wx1YAT
Я в…
💩7🔥3