Category: How to

Podcast WP blog in a minute


Is that so easy to publish your own podcast ? It may require recording some awesome content and then push it to the web. Is there any better ways to do that ?

Anchor and WordPress

Anchor will help you to publish podcast, you can record your own or simply convert the WordPress post into listenable and add links to WordPress posts too. We can choose what ever post we want to be and there is an option for monetization.

Traffic that matters

Anchor is not only help me to publish podcast of my post but also increase the popularity of the blog too. In effect it the traffic will boom. So try it out

Here is a sample PODCAST

Quasar UI framework for Vue – Developer blog

This episode is also available as a blog post: https://developerm.dev/2021/03/22/quasar-ui-framework-for-vue/
  1. Quasar UI framework for Vue
  2. MobaXterm SSH client for Raspberry pi
  3. Vuex store ?
  4. How to Modules in Vuex
  5. Redirect a route in Vue router

Color palettes for web developers


Web without colors ? Am I watching a black and white movie ? There are plenty of ways you can use colors. Most of the web UI designers have the palettes.

Codies like me always love to have minimal editors like VSCode / Atom / Sublim. There are plenty of website offer variety of palletes and gradient map.

One of my favorite is UI Gradient which let me choose between colors and gradients and simply copy the css to my web app .

The others in my list offer cool cool palettes and Canva is another favorite of mine

How reactivity works in Vuejs


One of the interesting thing about all these JavaScript Frameworks is reactivity of components. Each framework have their own way to treat us.

Problem

Suppose you have a counter that increment when user click it will increase by itself. So each time user click on it, the UI should update, it should reloaded the page/UI.

Solution

This problem have one solution, binding. Vuejs allow us bind members of the component.

<template>
<div >     
   {{counter}}
</div>
</template>
Pages: Page 1, Page 2

Create PolarArea chart component in Vue


Data Visualization is the important part of a commercial application. There are plenty of JavaScript library available for this task. In this series of post we are discussing about Chartjs and its Vue wrapper.

Creating Component may save your time and it increase the re-usability of the code.

Create Polar Chart component

In-order to use Chartjs and create bubble chart we need multiple dependency which can be installed using one of the following methods.

 yarn add vue-chartjs chart.js
 npm install vue-chartjs chart.js --save

Create component

In the component folder of the project add the following code and name the file PolarAreaChart.js

import { PolarArea, mixins } from 'vue-chartjs'

export default {
  extends: PolarArea,  
  mixins: [mixins.reactiveProp],
  name: 'PolarAreaChart',
  props: [{
    chartdata: {
      type: Object,
      default: null
    },
    options: {
      type: Object,
      default: null
    }
  }],
  mounted() {
    this.renderChart(this.chartData, this.options)
  }
}

We have used a mixin which combine the reactive props and PolarArea from the vue-chartjs module.

Using the component

In the page component we can import component and bind the data, and options. 

<template>
  <div class="flex-container">
    <PolarAreaChart Chart :chartData="chartdata" :options="options" />
  </div>
</template>

<script>
// @ is an alias to /src
import PolarAreaChart from '@/components/PolarAreaChart'
export default {
  name: "PolarArea",
  components: { PolarAreaChart 
  },
  data (){
    return {
    chartdata: {
      labels: ['January', 'February'],
      datasets: [
        {
          label: 'Data One',
          backgroundColor: '#f87979',
          data: [40, 20]
        },
         {
          label: 'Data Two',
          backgroundColor: '#5885af',
          data: [140, 120]
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false
    },
    }

  }
  
};
</script>
<style>
.flex-container {
  display: flex;
}

</style>

A complete set of chart components will be available on Vue-chart-components Repository

Following vue-chartjs post may help you build app faster

Create Radar component in Vue


Data Visualization is the important part of a commercial application. There are plenty of JavaScript library available for this task. In this series of post we are discussing about Chartjs and its Vue wrapper.

Creating Component may save your time and it increase the re-usability of the code.

Create Radar Chart component

In-order to use Chartjs and create Radar chart we need multiple dependency which can be installed using one of the following methods.

 yarn add vue-chartjs chart.js
 npm install vue-chartjs chart.js --save
Pages: Page 1, Page 2

Create Horizontal Bar chart component in Vue


Data Visualization is the important part of a commercial application. There are plenty of JavaScript library available for this task. In this series of post we are discussing about Chartjs and its Vue wrapper.

Creating Component may save your time and it increase the re-usability of the code.

Create Horizontal Chart component

In-order to use Chartjs and create Horizontal Bar chart we need multiple dependency which can be installed using one of the following methods.

 yarn add vue-chartjs chart.js
 npm install vue-chartjs chart.js --save
Pages: Page 1, Page 2

Create Scatter chart component in Vue


Data Visualization is the important part of a commercial application. There are plenty of JavaScript library available for this task. In this series of post we are discussing about Chartjs and its Vue wrapper.

Creating Component may save your time and it increase the re-usability of the code.

Create Bubble Chart component

In-order to use Chartjs and create scatter chart we need multiple dependency which can be installed using one of the following methods.

 yarn add vue-chartjs chart.js
 npm install vue-chartjs chart.js --save
Pages: Page 1, Page 2

Create Bubble chart component in Vue


Data Visualization is the important part of a commercial application. There are plenty of JavaScript library available for this task. In this series of post we are discussing about Chartjs and its Vue wrapper.

Creating Component may save your time and it increase the re-usability of the code.

Create Bubble Chart component

In-order to use Chartjs and create bubble chart we need multiple dependency which can be installed using one of the following methods.

 yarn add vue-chartjs chart.js
 npm install vue-chartjs chart.js --save

Create component

In the component folder of the project add the following code and name the file BubbleChart.js

import { Bubble, mixins } from 'vue-chartjs'

export default {
  extends: Bubble,  
  mixins: [mixins.reactiveProp],
  name: 'BubbleChart',
  props: [{
    chartdata: {
      type: Object,
      default: null
    },
    options: {
      type: Object,
      default: null
    }
  }],
  mounted() {
    this.renderChart(this.chartData, this.options)
  }
}

We have used a mixin which combine the reactive props and Bubble chart from the vue-chartjs module.

Using the component

In the page component we can import component and bind the data, and options. 

<template>
  <div class="flex-container">
    <BubbleChart Chart :chartData="chartdata" :options="options" />
  </div>
</template>

<script>
// @ is an alias to /src
import BubbleChart from '@/components/BubbleChart'
export default {
  name: "Bubble",
  components: { BubbleChart 
  },
  data (){
    return {
    chartdata: {
      labels: ['January', 'February'],
      datasets: [
          {
          label: 'Data One',
          backgroundColor: '#f87979',
          data: [
            {
              x: 20,
              y: 25,
              r: 5
            },
            {
              x: 40,
              y: 10,
              r: 10
            },
            {
              x: 30,
              y: 22,
              r: 30
            }
          ]
        },
        {
          label: 'Data Two',
          backgroundColor: '#7C8CF8',
          data: [
            {
              x: 10,
              y: 30,
              r: 15
            },
            {
              x: 20,
              y: 20,
              r: 10
            },
            {
              x: 15,
              y: 8,
              r: 30
            }
          ]
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false
    },
    }

  }
  
};
</script>
<style>
.flex-container {
  display: flex;
}

</style>

A complete set of chart components will be available on Vue-chart-components Repository

Following vue-chartjs post may help you build app faster

Create Pie chart component in Vue


Data Visualization is the important part of a commercial application. There are plenty of JavaScript library available for this task. In this series of post we are discussing about Chartjs and its Vue wrapper.

Creating Component may save your time and it increase the re-usability of the code.

Create Pie Chart component

Pie charts are easiest option when we have limited amount of data sets. In-order to use Chartjs and create pie chart we need multiple dependency which can be installed using one of the following methods.

 yarn add vue-chartjs chart.js
 npm install vue-chartjs chart.js --save

Create component

In the component folder of the project add the following code and name the file PieChart.js

import { Pie, mixins } from 'vue-chartjs'

export default {
  extends: Pie,
  mixins: [mixins.reactiveProp],
  name: 'PieChart',
  props: [{
    chartData: {
      type: Object,
      default: null
    },
    options: {
      type: Object,
      default: null
    }
  }],
  mounted() {
    this.renderChart(this.chartData, this.options)
  }
}

We have used a mixin which combine the reactive props and Pie chart from the vue-chartjs module.

Using the component

In the page component we can import component and bind the data, and options. 

<template>
  <div class="flex-container">
    <PC :chartData="chartdata" />
  </div>
</template>

<script>
// @ is an alias to /src
import PieChart from "@/components/PieChart";
export default {
  name: "PieChart",
  components: { 'PC':PieChart },
  data() {
    return {
      chartdata: {
        labels: ["VueJs", "EmberJs", "ReactJs", "AngularJs"],
        datasets: [
          {
            backgroundColor: ["#41B883", "#E46651", "#00D8FF", "#DD1B16"],
            data: [40, 20, 80, 10]
          }
        ]
      }
    };
  },
};
</script>
<style>
.flex-container {
  display: flex;
}
</style>

A complete set of chart components will be available on Vue-chart-components Repository

Following vue-chartjs post may help you build app faster

Create Bar chart component in Vue


Data Visualization is the important part of a commercial application. There are plenty of JavaScript library available for this task. In this series of post we are discussing about Chartjs and its Vue wrapper.

Creating Component may save your time and it increase the re-usability of the code.

Create a Bar Chart component

In-order to use Chartjs charts we need multiple dependency which can be installed using one of the following methods.

 yarn add vue-chartjs chart.js
 npm install vue-chartjs chart.js --save

Create component

In the component folder of the project add the following code and name the file BarChart.js

import { Bar, mixins } from 'vue-chartjs'

export default {
  extends: Bar,  
  mixins: [mixins.reactiveProp],
  name: 'BarChart',
  props: [{
    chartdata: {
      type: Object,
      default: null
    },
    options: {
      type: Object,
      default: null
    }
  }],
  mounted() {
    this.renderChart(this.chartData, this.options)
  }
}

We have used a mixin which combine the reactive props and Bar chart from the vue-chartjs module.

Using the component

In the page component we can import component and bind the data, and options. 

<template>
  <div class="flex-container">
    <BarChart :chartData="chartdata" :options="options" />
  </div>
</template>

<script>
// @ is an alias to /src
import BarChart from '@/components/BarChart'
export default {
  name: "Bar",
  components: { BarChart 
  },
  data (){
    return {
    chartdata: {
      labels: ['January', 'February'],
      datasets: [
        {
          label: 'Data One',
          backgroundColor: '#f87979',
          data: [40, 20]
        },
         {
          label: 'Data Two',
          backgroundColor: '#5885af',
          data: [140, 120]
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false
    },
    }

  }
  
};
</script>
<style>
.flex-container {
  display: flex;
}

</style>

A complete set of chart components will be available on Vue-chart-components Repository

Following vue-chartjs post may help you build app faster