Material Design Framework
Vuetify is a Vue UI Library with beautifully handcrafted Material Components. No design skills required — everything you need to create amazing applications is at your fingertips.
https://vuetifyjs.com/en/
Vuetify is a Vue UI Library with beautifully handcrafted Material Components. No design skills required — everything you need to create amazing applications is at your fingertips.
https://vuetifyjs.com/en/
Vuetify
Vuetify — A Vue Component Framework
Vuetify is a no design skills required Open Source UI Component Framework for Vue. It provides you with all of the t...
Управление данными в системе автоматизации на Vue и Vuex и решение проблем тестирования с помощью Jest
https://habr.com/ru/post/590753/?utm_campaign=590753&utm_source=habrahabr&utm_medium=rss
Привет! Меня зовут Артём Карачёв, я фронтенд-разработчик в Sportmaster Lab. Сейчас мы пишем модуль автоматизации физической фотостудии, где работают несколько фотографов, менеджеров, фоторедакторов, кладовщиков и других. Все фото кроссовок, которые вы видите в интернет-магазинах Спортмастера, снимают и загружают в базу данных именно эти люди. Благодаря модулю автоматизации они смогут их выгружать быстрее и легче. Возможно, наш опыт организации vuex-хранилища и слоя получения данных, а также последующего интеграционно-компонентного тестирования окажется кому-то полезным. Читать далее
https://habr.com/ru/post/590753/?utm_campaign=590753&utm_source=habrahabr&utm_medium=rss
Привет! Меня зовут Артём Карачёв, я фронтенд-разработчик в Sportmaster Lab. Сейчас мы пишем модуль автоматизации физической фотостудии, где работают несколько фотографов, менеджеров, фоторедакторов, кладовщиков и других. Все фото кроссовок, которые вы видите в интернет-магазинах Спортмастера, снимают и загружают в базу данных именно эти люди. Благодаря модулю автоматизации они смогут их выгружать быстрее и легче. Возможно, наш опыт организации vuex-хранилища и слоя получения данных, а также последующего интеграционно-компонентного тестирования окажется кому-то полезным. Читать далее
Хабр
Как мы организовали хранилище фоток с кроссовками на Vue и Vuex и немного автоматизировали работу фотографов
Привет! Меня зовут Артём Карачёв, я фронтенд-разработчик в Sportmaster Lab. Сейчас мы пишем модуль автоматизации физической фотостудии, где работают несколько фотографов, менеджеров, фоторедакторов,...
Vue & Capacitor
Build native mobile apps with web technology and Vue
https://capacitorjs.com/solution/vue
Build native mobile apps with web technology and Vue
https://capacitorjs.com/solution/vue
Capacitor
Using Capacitor with Vue
Build iOS, Android, and Progressive Web Apps with Vue
Vue.js devtools
Chrome and Firefox DevTools extension for debugging Vue.js applications.
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
Chrome and Firefox DevTools extension for debugging Vue.js applications.
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
Изучение Vue.js в 2022 году: дорожная карта разработчика
Изучение Vue.js стоит начать с того, что это популярный JavaScript-фреймворк для создания пользовательских интерфейсов. Ядро Vue включает в себя библиотеку ядра, маршрутизатор и Vuex, а сам фреймворк пригоден для постепенного внедрения, в отличие от аналогов-монолитов
https://tproger.ru/articles/izuchenie-vue-js-v-2021-godu-dorozhnaja-karta-razrabotchika/amp/
Изучение Vue.js стоит начать с того, что это популярный JavaScript-фреймворк для создания пользовательских интерфейсов. Ядро Vue включает в себя библиотеку ядра, маршрутизатор и Vuex, а сам фреймворк пригоден для постепенного внедрения, в отличие от аналогов-монолитов
https://tproger.ru/articles/izuchenie-vue-js-v-2021-godu-dorozhnaja-karta-razrabotchika/amp/
Tproger
Изучение Vue.js в 2021 году: дорожная карта разработчика
Хотите начать изучение Vue.js в 2021 году? В этом поможет дорожная карта с включёнными в неё этапами изучения и необходимыми инструментами.
Как мы ускоряли комментарии Хабра
https://habr.com/ru/post/590111/?utm_campaign=590111&utm_source=habrahabr&utm_medium=rss
Комментарии на Хабре иногда несут больше пользы, чем сама статья. Поэтому при переходе на новую версию сайта было важно сделать работу с комментами не хуже, чем было.
Вы когда-нибудь открывали в старом дизайне Хабра пост с большим числом комментариев? Страничка даже с тысячей сообщений грузится шустро, на ней без серьёзных задержек работает форма для ответа, кнопки голосования и закладок. Но когда мы начали переход на новую версию Хабра, стало понятно, что добиться такой же скорости будет непросто.
Этому есть несколько причин. Во-первых, Хабр стал одностраничным приложением (SPA, Single Page Application) на Vue, то есть теперь переходы между страницами рисуются на клиенте с помощью JS вместо классического серверного рендеринга (Server-Side Rendering, SSR). Такие SPA-страницы отображаются быстрее на современных устройствах, но на старых девайсах могут тормозить.
Во-вторых, движок старого Хабра — это больше десяти лет оптимизаций, костылей и заплаток. Вполне естественно, что если попытаться переписать их с нуля на современных технологиях, придётся учесть эту историю поиска и устранения бутылочных горлышек в производительности.
В октябре мы постепенно выкатывали на часть пользователей обновлённую версию комментариев, над которой трудились последние полгода. Наши новые комментарии должны рендериться быстрее и доставлять удовольствие всем, а не только обладателям топовых MacBook Pro c M1 Max.
Давайте посмотрим, как работали комментарии полгода назад, до того, как мы начали работу по оптимизации.
Читать дальше →
https://habr.com/ru/post/590111/?utm_campaign=590111&utm_source=habrahabr&utm_medium=rss
Комментарии на Хабре иногда несут больше пользы, чем сама статья. Поэтому при переходе на новую версию сайта было важно сделать работу с комментами не хуже, чем было.
Вы когда-нибудь открывали в старом дизайне Хабра пост с большим числом комментариев? Страничка даже с тысячей сообщений грузится шустро, на ней без серьёзных задержек работает форма для ответа, кнопки голосования и закладок. Но когда мы начали переход на новую версию Хабра, стало понятно, что добиться такой же скорости будет непросто.
Этому есть несколько причин. Во-первых, Хабр стал одностраничным приложением (SPA, Single Page Application) на Vue, то есть теперь переходы между страницами рисуются на клиенте с помощью JS вместо классического серверного рендеринга (Server-Side Rendering, SSR). Такие SPA-страницы отображаются быстрее на современных устройствах, но на старых девайсах могут тормозить.
Во-вторых, движок старого Хабра — это больше десяти лет оптимизаций, костылей и заплаток. Вполне естественно, что если попытаться переписать их с нуля на современных технологиях, придётся учесть эту историю поиска и устранения бутылочных горлышек в производительности.
В октябре мы постепенно выкатывали на часть пользователей обновлённую версию комментариев, над которой трудились последние полгода. Наши новые комментарии должны рендериться быстрее и доставлять удовольствие всем, а не только обладателям топовых MacBook Pro c M1 Max.
Давайте посмотрим, как работали комментарии полгода назад, до того, как мы начали работу по оптимизации.
Читать дальше →
A nuxt invoice app using nuxt.js and firebase
https://vuejsexamples.com/a-nuxt-invoice-app-using-nuxt-js-and-firebase/
A nuxt invoice app using nuxt.js and firebase
https://vuejsexamples.com/a-nuxt-invoice-app-using-nuxt-js-and-firebase/
A nuxt invoice app using nuxt.js and firebase
A Tic Tac Toe Game Written in Vue 3 And Javascript
https://vuejsexamples.com/a-tic-tac-toe-game-written-in-vue-3-and-javascript/
A Tic Tac Toe Game Written in Vue 3 And Javascript
https://vuejsexamples.com/a-tic-tac-toe-game-written-in-vue-3-and-javascript/
A Tic Tac Toe Game Written in Vue 3 And Javascript
VueTrese: a VueDose clone written in Nuxt 3
https://vuejsexamples.com/vuetrese-a-vuedose-clone-written-in-nuxt-3/
VueTrese: a VueDose clone written in Nuxt 3
https://vuejsexamples.com/vuetrese-a-vuedose-clone-written-in-nuxt-3/
VueTrese: a VueDose clone written in Nuxt 3
Computed Properties in React vs. Vue
https://medium.com/@shore.jeremiah/computed-properties-in-react-vs-vue-f942e4c763ea?source=rss------vuejs-5
As a software engineer familiar with front-end JavaScript frameworks like React and Vue, you may have a preference for the idioms and…Continue reading on Medium »
https://medium.com/@shore.jeremiah/computed-properties-in-react-vs-vue-f942e4c763ea?source=rss------vuejs-5
As a software engineer familiar with front-end JavaScript frameworks like React and Vue, you may have a preference for the idioms and…Continue reading on Medium »
Looking at the new v-memo directive in Vue 3.2
https://dev.to/reegodev/looking-at-the-new-v-memo-directive-in-vue-32-5d6d
The release of Vue 3.2 introduced some new functionalities, mainly related to performance and optimisations. One of these features is a new directive called v-memo
What is v-memo?
v-memo, as the name suggests, is a new directive related to the memoization of parts of a template.
If you are not familiar with the term "memoization", wikipedia describes it as:
In computing, memoization or memoisation is an optimization technique used primarily to speed up computer programs by storing the results of expensive function calls and returning the cached result when the same inputs occur again
In Vue this description sounds really like what computed properties already do.
In fact v-memo can be seen as a computed property for parts of a template!
Using v-memo
v-memo accepts a single parameter, which should be an array of dependencies. The element that uses this directive and all its descendants will only be re-rendered when one of the dependencies change.
For example:
<div v-memo="[dep1, dep2]">
...
</div>
Note that if you don't provide dependencies , ie:v-memo="[]", you obtain the same functionality as v-once.
Examples
Since v-memo is mainly useful for performance reasons, one of the best scenarios where you'd want to use it is when rendering huge lists of items with v-for:
<div v-for="item in list" :key="item.id" v-memo="[item.id === selected]">
<p>ID: {{ item.id }} - selected: {{ item.id === selected }}</p>
</div>
In this example we are telling v-memo to only re-render an item if it has been selected or deselected, all other items will be skipped entirely.
We don't need to include item.id in the dependency array since the sub-template of every item is already keyed, so it generates a separate sub-tree.
Another thing to keep in mind is that v-memo is only useful in a v-for if you are using some kind of interpolation. If for example you are rendering a list of components like <MyComponent v-for="item in list" :key="item.id" v-memo />, you are not going to benefit from v-memo as the diffing is made inside each component.
I've prepared an example on StackBlitz that shows visually how v-memo helps with performance in lists: https://stackblitz.com/edit/vue-v-memo
https://dev.to/reegodev/looking-at-the-new-v-memo-directive-in-vue-32-5d6d
The release of Vue 3.2 introduced some new functionalities, mainly related to performance and optimisations. One of these features is a new directive called v-memo
What is v-memo?
v-memo, as the name suggests, is a new directive related to the memoization of parts of a template.
If you are not familiar with the term "memoization", wikipedia describes it as:
In computing, memoization or memoisation is an optimization technique used primarily to speed up computer programs by storing the results of expensive function calls and returning the cached result when the same inputs occur again
In Vue this description sounds really like what computed properties already do.
In fact v-memo can be seen as a computed property for parts of a template!
Using v-memo
v-memo accepts a single parameter, which should be an array of dependencies. The element that uses this directive and all its descendants will only be re-rendered when one of the dependencies change.
For example:
<div v-memo="[dep1, dep2]">
...
</div>
Note that if you don't provide dependencies , ie:v-memo="[]", you obtain the same functionality as v-once.
Examples
Since v-memo is mainly useful for performance reasons, one of the best scenarios where you'd want to use it is when rendering huge lists of items with v-for:
<div v-for="item in list" :key="item.id" v-memo="[item.id === selected]">
<p>ID: {{ item.id }} - selected: {{ item.id === selected }}</p>
</div>
In this example we are telling v-memo to only re-render an item if it has been selected or deselected, all other items will be skipped entirely.
We don't need to include item.id in the dependency array since the sub-template of every item is already keyed, so it generates a separate sub-tree.
Another thing to keep in mind is that v-memo is only useful in a v-for if you are using some kind of interpolation. If for example you are rendering a list of components like <MyComponent v-for="item in list" :key="item.id" v-memo />, you are not going to benefit from v-memo as the diffing is made inside each component.
I've prepared an example on StackBlitz that shows visually how v-memo helps with performance in lists: https://stackblitz.com/edit/vue-v-memo
DEV Community
Looking at the new v-memo directive in Vue 3.2
The release of Vue 3.2 introduced some new functionalities, mainly related to performance and...
TIL about specific Array combination types
https://dev.to/vanquard/til-about-specific-array-combination-types-28bo
Okay, so its not actually called "specific Array combination types", but that was the best description I had for it, before I looked it up.
Its actually called "Tuple Types" and the documentation can be found here: https://www.tutorialsteacher.com/typescript/typescript-tuple
I'll come back to why this blew my mind today, but first, lets scroll back a bit, to some of my first steps into JS/TS programming. I started my programming career in Java, and one of the things that annoyed the hell out of me, was the fact that I could only have 1 object returned from a function (This was before the Pair class was introduced).
But in JS we can easily just return an array with 2 values:
const someFunction = () => {
return ['Mathias', 28];
}
And combined with some destructuring on the recieving, it was all nice and easy:
const [myName, myAge] = someFunction();
Adding types
Until today I never had to add types onto a scenario like this, usually when I work with arrays, I either just do a basic string[], or when its required in complex object scenarios: Array<{name: string, age: number}>.
But with the tuples we can actually avoid naming them and just say the return type for our function is [string, number]:
const someFunction = (): [string, number] => {
return ['Mathias', 28];
}
Vue relation
I came across this when I working with Vue2 combined with TS, and was trying to create a v-for loop over a Map, but Vue2 did not support this, so I had to come up with a different approach that supported the same end goal.
So this is where the new tuples came in handy! Given an example with some data in a Map:
const map = new Map<string, object>();
map.set('key1', {data: 'lots of data'});
map.set('key2', {data: 'more data'});
I could then destructure it into an array like so:
const asArray = ...map.entries();
// Yielding:
[
['key1', {data: 'lots of data'}],
['key2', {data: 'more data'}],
]
And in order to Type this we now have:
const asArray: Array<[string, object]> = ...map.entries();
Thank you for reading this far, hope you gained something from this post.
https://dev.to/vanquard/til-about-specific-array-combination-types-28bo
Okay, so its not actually called "specific Array combination types", but that was the best description I had for it, before I looked it up.
Its actually called "Tuple Types" and the documentation can be found here: https://www.tutorialsteacher.com/typescript/typescript-tuple
I'll come back to why this blew my mind today, but first, lets scroll back a bit, to some of my first steps into JS/TS programming. I started my programming career in Java, and one of the things that annoyed the hell out of me, was the fact that I could only have 1 object returned from a function (This was before the Pair class was introduced).
But in JS we can easily just return an array with 2 values:
const someFunction = () => {
return ['Mathias', 28];
}
And combined with some destructuring on the recieving, it was all nice and easy:
const [myName, myAge] = someFunction();
Adding types
Until today I never had to add types onto a scenario like this, usually when I work with arrays, I either just do a basic string[], or when its required in complex object scenarios: Array<{name: string, age: number}>.
But with the tuples we can actually avoid naming them and just say the return type for our function is [string, number]:
const someFunction = (): [string, number] => {
return ['Mathias', 28];
}
Vue relation
I came across this when I working with Vue2 combined with TS, and was trying to create a v-for loop over a Map, but Vue2 did not support this, so I had to come up with a different approach that supported the same end goal.
So this is where the new tuples came in handy! Given an example with some data in a Map:
const map = new Map<string, object>();
map.set('key1', {data: 'lots of data'});
map.set('key2', {data: 'more data'});
I could then destructure it into an array like so:
const asArray = ...map.entries();
// Yielding:
[
['key1', {data: 'lots of data'}],
['key2', {data: 'more data'}],
]
And in order to Type this we now have:
const asArray: Array<[string, object]> = ...map.entries();
Thank you for reading this far, hope you gained something from this post.
DEV Community
TIL about specific Array combination types
Okay, so its not actually called "specific Array combination types", but that was the best...
Best Black Friday Deals for Developers
https://dev.to/jranandj/best-black-friday-deals-for-developers-38g7
Creative Tim
Best premium templates and UI kits to save plenty of your development time.With over 39000+ Github stars, Review - 4.5/5 over 20,000 developers
Get 80% off for 100 UI Kits and Dashboards based on various tech stacks including Angular, Vue, React, etc…
Discount: 80% OFF
Availability: 22nd Nov - 3rd Dec 2021
Coupon Code: not needed
Website
VueSchool
At Vue School, you’ll learn Vue.js and modern, cutting-edge front-end technologies from core-team members and industry experts with premium tutorials and video courses.
You will get
On top of over 33 courses, you get full access to the Vue 3 Masterclass.
A comprehensive guide to developing modern Vue Single Page Applications.
140+ lessons and 15 hours of content all wrapped up into one course.
Real-World Knowledge of Vue.js by practically building a complete forum from scratch.
Discount: 40% OFF
Availability: available now
Coupon Code: not needed
Website
Wrap Pixel
Get 25 Admin Dashboard Templates & Website Template in price of One Template
Includes
11 Bootstrap Themes
8 Angular Templates
4 React Templates
Vuejs Templates
Discount: 95% OFF
Availability: 16th Nov - 5th Dec 2021
Coupon Code: BF2021
If you don’t want to buy a bundle, you can buy single product with 50% OFF
Website
Gridbox
If you’re a developer working on multiple side projects or startup ideas then you should try Gridbox. A powerful low-code website builder made for web developers like you that allows you drag and drop and write custom HTML, CSS and JS code.
40% Off - Yearly
You will get
Unlimited Projects / Websites
Private Projects
Deploy to Netlify
Access to PRO Bootstrap & Bulma components
Access to PRO Templates
Discount - 40% OFF
Availability - Now - Nov 30, 2021
Coupon Code - FRIDAY40
Website
BlueHost
Planning to set up a Wordpress site, then you can make use of Bluehost.
Powering over 2 million websites, Bluehost offers the ultimate WordPress platform. Tuned for WordPress, we offer WordPress-centric dashboards and tools along with 1-click installation, a
FREE domain name, email, FTP, and more. Easily scalable and backed by legendary 24/7 support by in-house WordPress experts.
Discount - Up to 75% OFF Websites & Hosting
Availability - Now
Website
DivJoy
If you’re planning to build a MVP or some cool project using React without writing much code then you need to try Divjoy - Powerful React codebase generator
Discount - Up to 60% Off
Coupon Code - None
Availability - 22 of 50 claimed (Price returns to $249 after all are claimed)
You will get
Lifetime access
Unlimited Project
Export High Quality React Code
Website
https://dev.to/jranandj/best-black-friday-deals-for-developers-38g7
Creative Tim
Best premium templates and UI kits to save plenty of your development time.With over 39000+ Github stars, Review - 4.5/5 over 20,000 developers
Get 80% off for 100 UI Kits and Dashboards based on various tech stacks including Angular, Vue, React, etc…
Discount: 80% OFF
Availability: 22nd Nov - 3rd Dec 2021
Coupon Code: not needed
Website
VueSchool
At Vue School, you’ll learn Vue.js and modern, cutting-edge front-end technologies from core-team members and industry experts with premium tutorials and video courses.
You will get
On top of over 33 courses, you get full access to the Vue 3 Masterclass.
A comprehensive guide to developing modern Vue Single Page Applications.
140+ lessons and 15 hours of content all wrapped up into one course.
Real-World Knowledge of Vue.js by practically building a complete forum from scratch.
Discount: 40% OFF
Availability: available now
Coupon Code: not needed
Website
Wrap Pixel
Get 25 Admin Dashboard Templates & Website Template in price of One Template
Includes
11 Bootstrap Themes
8 Angular Templates
4 React Templates
Vuejs Templates
Discount: 95% OFF
Availability: 16th Nov - 5th Dec 2021
Coupon Code: BF2021
If you don’t want to buy a bundle, you can buy single product with 50% OFF
Website
Gridbox
If you’re a developer working on multiple side projects or startup ideas then you should try Gridbox. A powerful low-code website builder made for web developers like you that allows you drag and drop and write custom HTML, CSS and JS code.
40% Off - Yearly
You will get
Unlimited Projects / Websites
Private Projects
Deploy to Netlify
Access to PRO Bootstrap & Bulma components
Access to PRO Templates
Discount - 40% OFF
Availability - Now - Nov 30, 2021
Coupon Code - FRIDAY40
Website
BlueHost
Planning to set up a Wordpress site, then you can make use of Bluehost.
Powering over 2 million websites, Bluehost offers the ultimate WordPress platform. Tuned for WordPress, we offer WordPress-centric dashboards and tools along with 1-click installation, a
FREE domain name, email, FTP, and more. Easily scalable and backed by legendary 24/7 support by in-house WordPress experts.
Discount - Up to 75% OFF Websites & Hosting
Availability - Now
Website
DivJoy
If you’re planning to build a MVP or some cool project using React without writing much code then you need to try Divjoy - Powerful React codebase generator
Discount - Up to 60% Off
Coupon Code - None
Availability - 22 of 50 claimed (Price returns to $249 after all are claimed)
You will get
Lifetime access
Unlimited Project
Export High Quality React Code
Website
DEV Community
Best Black Friday Deals for Developers
Creative Tim Best premium templates and UI kits to save plenty of your development...