Liya Gebre

Liya Gebre

1613296680

Exercises from basic to intermediate with VueJS

Vue

    -p, --preset < presetName >        skip prompts
    -d, --default use the default on creation
    -m, --packageManager < command >   Use npm or yarn
    -n, --no-git Without using git
    -b, --bare No instructions for beginners
vue create example1 -dnm yarn
vue init simple project_name
vue init webpack-simple project_name
npm install -g npm-check-updates
ncu
ncu -u
"production" : "vue-cli-service build --modern"
npx http-server ./dist/

Currency library: Accounting.js

npm i accounting
or
yarn add accounting
  • Use:
  import  accounting  from  'accounting' ; 
  accounting . formatMoney ( value )

Library for Dates: moment.js

npm i moment
or
yarn add moment

CSS Bootstrap Library

npm i bootstrap jquery popper.js
or
yarn add bootstrap jquery popper.js @ popperjs / core
  • usage in main.js or index.js
  import  'bootstrap' ;  
  import  'bootstrap / dist / css / bootstrap.min.css' ; 
  window . $  =  window . jQuery  =  require ( 'jquery' ) ;

Using Babel - plugin-syntax-dynamic-import

This dependency will allow the Lazy Loading Routes to work and implement from VueJS in conjunction with Vue-Router.

Official documentation for Vue-Router official documentation for babel: .

Dependency installation:

npm install --save-dev @ babel / plugin-syntax-dynamic-import
or
yarn add --dev @ babel / plugin-syntax-dynamic-import

Installing Vue-Router

  < script  src = "https://unpkg.com/vue-router@3.1.6/dist/vue-router.js" > < / script >
  • Installation with NPM:
npm i --save vue-router
  • Installation with Yarn:
yarn add vue-router

Installing Vuex

  < script  src = "https://unpkg.com/vuex@3.1.3/dist/vuex.js" > < / script >
  • Installation with NPM:
npm -i vuex --save
  • Installation with Yarn:
yarn add vuex
  • Use mapState, mapGetters
import  { mapState ,  mapGetters }  from  'vuex'

Installing Bootstrap-Vue

To work with bootstrap-vue it is necessary to first install bootstrap.

  • Official site: Bootstrap-Vue ,

  • Using the CDN or file download:

  < head > 
    <! - Load required Bootstrap and BootstrapVue CSS -> 
    < link  type = " text / css " rel = " stylesheet " href = " //unpkg.com/bootstrap/dist/css/bootstrap.min.css "/>
     < link  type =" text / css " rel =" stylesheet " href =" //unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css "/>
     <! - Load polyfills to support older browsers -> 
    <script  src = "//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver " crossorigin =" anonymous " > </ script > 
    <! - Load Vue followed by BootstrapVue, and BootstrapVueIcons -> 
    < script  src =" //unpkg.com/vue@latest/dist/vue.min.js " > </ script > 
    < script  src =" //unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js " > </ script > 
    < script  src = " // unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js" > </ script > 
  </ head >
  • Installation with NPM:
npm i bootstrap-vue
  • Installation with Yarn:
yarn add bootstrap-vue
  • usage in main.js or index.js
  import  'bootstrap / dist / css / bootstrap.css' ; 
  import  'bootstrap-vue / dist / bootstrap-vue.css' ;

  import  {  BootstrapVue ,  IconsPlugin  }  from  'bootstrap-vue'

  // Install BootstrapVue 
  Vue . use ( BootstrapVue ) 
  // Optionally install the BootstrapVue icon components plugin 
  Vue . use ( IconsPlugin )

Using Webpack, NodeJS and ExpressJS

node ./node_modules/webpack/bin/webpack --config ./build/webpack.config.js 

Configuring and installing FireBase

To work with firebase you must have a Google account, go to the official website and create a new project, clicking start, then add project, write the name of the project and follow the steps.

  • Official site: Firebase

  • Documentation for JavaScript with Firestore. Firestore

  • Installation with NPM:

npm i firebase --save
  • Installation with Yarn:
yarn add firebase -D
  • To bring an application to Firebase Hosting, you must:
  1. Create the project in firebase
  2. Enter the hosting section
  3. Click start or get started
  4. Install via terminal firebase tool with: With NPM
  npm i firebase-tools -g
  1. With Yarn
yarn global add firebase-tools
  1. Then click continue within firebase hosting
  2. Now in the editor, within the project, you must start a firebase session with the command:, firebase loginselecting or starting the session with the gmail account where you are running firebase hosting on the web
  3. Now in the terminal, the project should be started with firebase init
  4. Then if to proceed
  5. After selecting the hosting
  6. Then select the project in which you have active hosting.
  7. Now you must write the name of the directory where the production files will be found. In this case you must enter “dist” because this will be the name of the folder that vue-cli creates for production.
  8. Indicate yes to compile in an SFC
  9. Once the firebase configuration process is finished, the production process must be started with vue-cli using the “build” command, either: With NPM
  npm run build
  1. With Yarn
yarn build
  1. Once the vue-cli production process is finished, the files in the dist folder must be sent to the firebase hosting, by means of the instruction: firebase deploy --only hosting

Applying FontAwesome

To use the FontAwesome library locally without the CDN, the dependencies must be installed:

  • Installation with NPM:
$ npm i --save @ fortawesome / fontawesome-svg-core
$ npm i --save @ fortawesome / free-solid-svg-icons
$ npm i --save @ fortawesome / vue-fontawesome
  • Installation with Yarn:
yarn add @ fortawesome / vue-fontawesome -D
yarn add @ fortawesome / free-solid-svg-icons -D
yarn add @ fortawesome / fontawesome-svg-core -D
yarn add @ fortawesome / fontawesome-free -D
import  {  library  }  from  '@ fortawesome / fontawesome-svg-core' ; 
import  {  faCheck ,  faTimes  }  from  '@ fortawesome / free-solid-svg-icons' ; 
import  {  FontAwesomeIcon  }  from  '@ fortawesome / vue-fontawesome' ;

library . add ( faCheck ) ; 
library . add ( faTimes ) ;

Vue . component ( 'font-awesome-icon' ,  FontAwesomeIcon ) ;

Installing Axios

  • Official site: Axios ,

  • Using the CDN:

  < Script  src = "https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js" > < / script > 
  ` ` 
  or 
  ` `javascript 
  < script  src = "https://unpkg.com/axios/dist/axios.min.js" > < / script > 
  `` `
  • Installation with NPM:
npm install axios --save-dev
  • Installation with Yarn:
yarn add axios -D

To use Axios, it must be imported into each component where you want to implement within the script:

import  axios  from  'axios' ;

Installing VueFire

  • Official Site: VueFire

  • Installation with NPM:

npm install vuefire firebase
  • Installation with Yarn:
yarn add vuefire firebase

What is application testing?

It is the process of submitting an application to different tests to verify that it works correctly.

Types of tests and development techniques with tests

For more information: Vue Test Utils

Unitary

A unit test or “unit test” is a type of automated test, that is, it must be able to be executed without the need for manual intervention. This test is used to verify that a specific method of the production code works correctly.

End-to-end tests

It is a methodology used to test whether the flow of an application is running as designed from start to finish.

The difference it has with unit tests is that end-to-end focuses on the system in an integral way, that is, testing it as a whole.

TDD and BDD techniques

Both techniques are aimed at creating more robust applications focused on requirements rather than on the content of the code itself.

Development guided by software tests, or Test-driven development (TDD) , is a technique that is based on a development of tests through which the code must pass, if it is well implemented, it continues to create code focused on the next test, Otherwise, it is configured until the test passes and we can go to the next phase.

Development directed by behavior or Behavior Driven Development (BDD) , as its name implies, it is not a testing technique, but rather a development strategy (as well as TDD).

While TDD focuses on the unit test, BDD instead, focuses on the highest level test, the functional test, the acceptance test, the focus is on complying with the business and not just with the code.

Assertions

An assertion is a Boolean expression at a specific point in a program that will be true unless there is an error in the program.

Mocks

Or “Mock objects” are substitutes for objects or system components, used in replacement during testing. Its main function is to validate that certain methods are called on the objects that they are imitating

Stubs

A surrogate function, method, or code snippet, which simulates specific behavior within an object to facilitate testing

Download Details:

Author: JuanDuran85

Source Code: https://github.com/JuanDuran85/Ejercicios_Vue

#vue #vuejs #javascript

What is GEEK

Buddha Community

Exercises from basic to intermediate with VueJS

Hire Dedicated VueJS Developers

Want to Hire VueJS Developer to develop an amazing app?

Hire Dedicated VueJS Developers on the contract (time/project) basis providing regular reporting about your app. We, at HourlyDeveloper.io, implement the right strategic approach to offer a wide spectrum of vue.js development services to suit your requirements at most competitive prices.

Consult with us:- https://bit.ly/2C5M6cz

#hire dedicated vuejs developers #vuejs developer #vuejs development company #vuejs development services #vuejs development #vuejs developer

Liya Gebre

Liya Gebre

1613296680

Exercises from basic to intermediate with VueJS

Vue

    -p, --preset < presetName >        skip prompts
    -d, --default use the default on creation
    -m, --packageManager < command >   Use npm or yarn
    -n, --no-git Without using git
    -b, --bare No instructions for beginners
vue create example1 -dnm yarn
vue init simple project_name
vue init webpack-simple project_name
npm install -g npm-check-updates
ncu
ncu -u
"production" : "vue-cli-service build --modern"
npx http-server ./dist/

Currency library: Accounting.js

npm i accounting
or
yarn add accounting
  • Use:
  import  accounting  from  'accounting' ; 
  accounting . formatMoney ( value )

Library for Dates: moment.js

npm i moment
or
yarn add moment

CSS Bootstrap Library

npm i bootstrap jquery popper.js
or
yarn add bootstrap jquery popper.js @ popperjs / core
  • usage in main.js or index.js
  import  'bootstrap' ;  
  import  'bootstrap / dist / css / bootstrap.min.css' ; 
  window . $  =  window . jQuery  =  require ( 'jquery' ) ;

Using Babel - plugin-syntax-dynamic-import

This dependency will allow the Lazy Loading Routes to work and implement from VueJS in conjunction with Vue-Router.

Official documentation for Vue-Router official documentation for babel: .

Dependency installation:

npm install --save-dev @ babel / plugin-syntax-dynamic-import
or
yarn add --dev @ babel / plugin-syntax-dynamic-import

Installing Vue-Router

  < script  src = "https://unpkg.com/vue-router@3.1.6/dist/vue-router.js" > < / script >
  • Installation with NPM:
npm i --save vue-router
  • Installation with Yarn:
yarn add vue-router

Installing Vuex

  < script  src = "https://unpkg.com/vuex@3.1.3/dist/vuex.js" > < / script >
  • Installation with NPM:
npm -i vuex --save
  • Installation with Yarn:
yarn add vuex
  • Use mapState, mapGetters
import  { mapState ,  mapGetters }  from  'vuex'

Installing Bootstrap-Vue

To work with bootstrap-vue it is necessary to first install bootstrap.

  • Official site: Bootstrap-Vue ,

  • Using the CDN or file download:

  < head > 
    <! - Load required Bootstrap and BootstrapVue CSS -> 
    < link  type = " text / css " rel = " stylesheet " href = " //unpkg.com/bootstrap/dist/css/bootstrap.min.css "/>
     < link  type =" text / css " rel =" stylesheet " href =" //unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css "/>
     <! - Load polyfills to support older browsers -> 
    <script  src = "//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver " crossorigin =" anonymous " > </ script > 
    <! - Load Vue followed by BootstrapVue, and BootstrapVueIcons -> 
    < script  src =" //unpkg.com/vue@latest/dist/vue.min.js " > </ script > 
    < script  src =" //unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js " > </ script > 
    < script  src = " // unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js" > </ script > 
  </ head >
  • Installation with NPM:
npm i bootstrap-vue
  • Installation with Yarn:
yarn add bootstrap-vue
  • usage in main.js or index.js
  import  'bootstrap / dist / css / bootstrap.css' ; 
  import  'bootstrap-vue / dist / bootstrap-vue.css' ;

  import  {  BootstrapVue ,  IconsPlugin  }  from  'bootstrap-vue'

  // Install BootstrapVue 
  Vue . use ( BootstrapVue ) 
  // Optionally install the BootstrapVue icon components plugin 
  Vue . use ( IconsPlugin )

Using Webpack, NodeJS and ExpressJS

node ./node_modules/webpack/bin/webpack --config ./build/webpack.config.js 

Configuring and installing FireBase

To work with firebase you must have a Google account, go to the official website and create a new project, clicking start, then add project, write the name of the project and follow the steps.

  • Official site: Firebase

  • Documentation for JavaScript with Firestore. Firestore

  • Installation with NPM:

npm i firebase --save
  • Installation with Yarn:
yarn add firebase -D
  • To bring an application to Firebase Hosting, you must:
  1. Create the project in firebase
  2. Enter the hosting section
  3. Click start or get started
  4. Install via terminal firebase tool with: With NPM
  npm i firebase-tools -g
  1. With Yarn
yarn global add firebase-tools
  1. Then click continue within firebase hosting
  2. Now in the editor, within the project, you must start a firebase session with the command:, firebase loginselecting or starting the session with the gmail account where you are running firebase hosting on the web
  3. Now in the terminal, the project should be started with firebase init
  4. Then if to proceed
  5. After selecting the hosting
  6. Then select the project in which you have active hosting.
  7. Now you must write the name of the directory where the production files will be found. In this case you must enter “dist” because this will be the name of the folder that vue-cli creates for production.
  8. Indicate yes to compile in an SFC
  9. Once the firebase configuration process is finished, the production process must be started with vue-cli using the “build” command, either: With NPM
  npm run build
  1. With Yarn
yarn build
  1. Once the vue-cli production process is finished, the files in the dist folder must be sent to the firebase hosting, by means of the instruction: firebase deploy --only hosting

Applying FontAwesome

To use the FontAwesome library locally without the CDN, the dependencies must be installed:

  • Installation with NPM:
$ npm i --save @ fortawesome / fontawesome-svg-core
$ npm i --save @ fortawesome / free-solid-svg-icons
$ npm i --save @ fortawesome / vue-fontawesome
  • Installation with Yarn:
yarn add @ fortawesome / vue-fontawesome -D
yarn add @ fortawesome / free-solid-svg-icons -D
yarn add @ fortawesome / fontawesome-svg-core -D
yarn add @ fortawesome / fontawesome-free -D
import  {  library  }  from  '@ fortawesome / fontawesome-svg-core' ; 
import  {  faCheck ,  faTimes  }  from  '@ fortawesome / free-solid-svg-icons' ; 
import  {  FontAwesomeIcon  }  from  '@ fortawesome / vue-fontawesome' ;

library . add ( faCheck ) ; 
library . add ( faTimes ) ;

Vue . component ( 'font-awesome-icon' ,  FontAwesomeIcon ) ;

Installing Axios

  • Official site: Axios ,

  • Using the CDN:

  < Script  src = "https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js" > < / script > 
  ` ` 
  or 
  ` `javascript 
  < script  src = "https://unpkg.com/axios/dist/axios.min.js" > < / script > 
  `` `
  • Installation with NPM:
npm install axios --save-dev
  • Installation with Yarn:
yarn add axios -D

To use Axios, it must be imported into each component where you want to implement within the script:

import  axios  from  'axios' ;

Installing VueFire

  • Official Site: VueFire

  • Installation with NPM:

npm install vuefire firebase
  • Installation with Yarn:
yarn add vuefire firebase

What is application testing?

It is the process of submitting an application to different tests to verify that it works correctly.

Types of tests and development techniques with tests

For more information: Vue Test Utils

Unitary

A unit test or “unit test” is a type of automated test, that is, it must be able to be executed without the need for manual intervention. This test is used to verify that a specific method of the production code works correctly.

End-to-end tests

It is a methodology used to test whether the flow of an application is running as designed from start to finish.

The difference it has with unit tests is that end-to-end focuses on the system in an integral way, that is, testing it as a whole.

TDD and BDD techniques

Both techniques are aimed at creating more robust applications focused on requirements rather than on the content of the code itself.

Development guided by software tests, or Test-driven development (TDD) , is a technique that is based on a development of tests through which the code must pass, if it is well implemented, it continues to create code focused on the next test, Otherwise, it is configured until the test passes and we can go to the next phase.

Development directed by behavior or Behavior Driven Development (BDD) , as its name implies, it is not a testing technique, but rather a development strategy (as well as TDD).

While TDD focuses on the unit test, BDD instead, focuses on the highest level test, the functional test, the acceptance test, the focus is on complying with the business and not just with the code.

Assertions

An assertion is a Boolean expression at a specific point in a program that will be true unless there is an error in the program.

Mocks

Or “Mock objects” are substitutes for objects or system components, used in replacement during testing. Its main function is to validate that certain methods are called on the objects that they are imitating

Stubs

A surrogate function, method, or code snippet, which simulates specific behavior within an object to facilitate testing

Download Details:

Author: JuanDuran85

Source Code: https://github.com/JuanDuran85/Ejercicios_Vue

#vue #vuejs #javascript

Oleta  Orn

Oleta Orn

1599030441

Vue is an amazing framework for 2020. Why?

Image for post

An amazing conference regarding the Vue framework was held in the US in the first week of March 2020 for two fantastic days. Some spectacular presentations were given during that time regarding the design, feature, and application tools of the framework. One of the most eye gazing things was that combining vue.js development services, professionals, and others as there were more than 900 attendees at the event. The brand new composition API for the Vue3 was the talk of the town.

All this leads to the conclusion that Vue might have an opportunity to be the most amazing for the year 2020. While the first quarter has been significantly better for it, let’s look at some of the characteristics which make the Vue an amazing framework for 2020.

Friendly learning curve & ease of integration

Ask any Vue.js developer and they will tell you that how working with this framework is very relaxing and even if you are a beginner, fundamental knowledge of HTML, CSS, and Javascript is good enough to build a simple application.

Do you know more than 75% of Vue.js development services just prefer it because of its ease of integration? This means you can hire Vue.js developers to build the application right from the scratch or can get an existing application accommodated to your requirements.

Although the inbuilt guide and documentation of the Vue framework make it sufficient for you to start coding.

This might interest you to know that Vue.js is for progressive web applications which also support libraries like Vue router, Vuex, Vue Test Utils, Vue-dev tools, Vue CLI for performing various functions.

It may seem a bit exaggerated but the truth is whether its loader, renderer, component caching or asset preload, etc every tool, every component in this framework performs very efficiently.

Top reasons why Vue.js is becoming the most trending JS-based framework

As noted above how Vue.js development services state that creating an application with Vue is very simple. So now we are going to look briefly into some of the top reasons why Vue.js development companies favor it from the stack of all JS-based frameworks.

Adaptable development environment: Very beneficial to the large scale projects, now and again Vue.js has proved that it adjusts with the components of other applications and develops it in remarkably less time compared to other JS-frameworks. Have you wondered why people are using it comprehensively?

Supported Libraries: Vue.js provides support libraries for any possible difficulties a developer might face. As Vue Router is for routing, Vuex for state management, Vue Test Utils for unit testing, Vue-dev tools for debugging, and Vue CLI for plugin management. And the best part here is this all inbuilt are accessible 24/7. Vue.js developer can rectify or alter the coding with the help of these support libraries.

Great Performance: For developing mobile apps, this framework tends to perform well in comparison to other frameworks. The speed of the loading page is significantly better than any other Javascript. Whether it’s a website or any other application, reliability and great performance is always the best advantage of the framework.

Community meets: Live events or meetings are organized regularly so that the Vue.js developer can get the regular updates of the features and benefits of the framework. This community is growing bigger day by day and is managed by Evan You, the developer of Vue.js framework himself.

#vue #vuejs-development-company #vuejs-developer #vuejs #vuejs-development

Biju Augustian

Biju Augustian

1574339995

Learn Python Tutorial from Basic to Advance

Description
Become a Python Programmer and learn one of employer’s most requested skills of 21st century!

This is the most comprehensive, yet straight-forward, course for the Python programming language on Simpliv! Whether you have never programmed before, already know basic syntax, or want to learn about the advanced features of Python, this course is for you! In this course we will teach you Python 3. (Note, we also provide older Python 2 notes in case you need them)

With over 40 lectures and more than 3 hours of video this comprehensive course leaves no stone unturned! This course includes tests, and homework assignments as well as 3 major projects to create a Python project portfolio!

This course will teach you Python in a practical manner, with every lecture comes a full coding screencast and a corresponding code notebook! Learn in whatever manner is best for you!

We will start by helping you get Python installed on your computer, regardless of your operating system, whether its Linux, MacOS, or Windows, we’ve got you covered!

We cover a wide variety of topics, including:

Command Line Basics
Installing Python
Running Python Code
Strings
Lists
Dictionaries
Tuples
Sets
Number Data Types
Print Formatting
Functions
Scope
Built-in Functions
Debugging and Error Handling
Modules
External Modules
Object Oriented Programming
Inheritance
Polymorphism
File I/O
Web scrapping
Database Connection
Email sending
and much more!
Project that we will complete:

Guess the number
Guess the word using speech recognition
Love Calculator
google search in python
Image download from a link
Click and save image using openCV
Ludo game dice simulator
open wikipedia on command prompt
Password generator
QR code reader and generator
You will get lifetime access to over 40 lectures.

So what are you waiting for? Learn Python in a way that will advance your career and increase your knowledge, all in a fun and practical way!

Basic knowledge
Basic programming concept in any language will help but not require to attend this tutorial
What will you learn
Learn to use Python professionally, learning both Python 2 and Python 3!
Create games with Python, like Tic Tac Toe and Blackjack!
Learn advanced Python features, like the collections module and how to work with timestamps!
Learn to use Object Oriented Programming with classes!
Understand complex topics, like decorators.
Understand how to use both the pycharm and create .py files
Get an understanding of how to create GUIs in the pycharm!
Build a complete understanding of Python from the ground up!

#Learn Python #Learn Python from Basic #Python from Basic to Advance #Python from Basic to Advance with Projects #Learn Python from Basic to Advance with Projects in a day

Hire Dedicated Vuejs Developers - Hire Vue.Js Development Company

The JavaScript framework that has grabbed the attention of New Age Website and App developers for its ease of developing interactive elements is the VueJS framework.

Want an elegant and interactive app for your business with VueJS?

Hire dedicated VueJS developers from WebClues Infotech as they have the knowledge, skills, and past experience in developing successful apps with the use of the VueJS framework. Also, do not worry much about the prices as they offer quite a flexible pricing structure and an option to choose the best suitable one for you.

Give your business the boost it needs with the mobile app development.

Get in touch with us !!

Hire VueJS developers Now: https://www.webcluesinfotech.com/hire-vuejs-developer/

Email: sales@webcluesinfotech.com

#hire dedicated vuejs developers #hire vuejs developer #hire vuejs developers #hire vue.js developer #hire vuejs developers in india #hire vue.js development company