DEV Community: Gayathri R

Sorting Data in Go: An Overview of Different Types of Sorting in Go

Gayathri R — Mon, 06 Mar 2023 15:10:08 +0000

Are you looking to sort data in your Go applications? In this blog post, we will explore the various types of sorting available in Go and how to implement them in your code. So, let's get started!

There are two main sorting options available in Go: sort.Sort and sort.Slice.

sort.Sort:

sort.Sort is a generic sorting function that can be used to sort any type of data. It takes a slice of any type, and a comparison function as parameters. The comparison function takes two elements of the slice and returns whether the first element should come before or after the second element.

Example:

package main

import (
    "fmt"
    "sort"
)

func main() {
    // Create a slice of integers.
    data := []int{2, 4, 1, 3, 5}

    // Sort the slice in ascending order.
    sort.Sort(sort.IntSlice(data))
    fmt.Println(data)
}

// Output:
// [1, 2, 3, 4, 5]

sort.Slice:

sort.Slice is a convenience function that calls sort.Sort with a predefined comparison function for the type of data it is sorting. It takes a slice of any type, and an optional comparison function as parameters. If you don't provide a comparison function, it will use the default comparison function for the type.

Example:

package main

import (
    "fmt"
    "sort"
)

func main() {
    // Create a slice of strings.
    data := []string{"Bob", "Alice", "Eve"}

    // Sort the slice in alphabetical order.
    sort.Slice(data, func(i, j int) bool {
        return data[i] < data[j]
    })
    fmt.Println(data)
}

// Output:
// [Alice, Bob, Eve]

Example Program for sorting a Json Array:-

package main

import (
    "encoding/json"
    "fmt"
    "sort"
)

// Person is a struct representing a person.
type Person struct {
    Name string
    Age  int
}

func main() {
    // Create a slice of Person structs.
    data := []Person{
        {Name: "Alice", Age: 25},
        {Name: "Bob", Age: 24},
        {Name: "Charlie", Age: 50},
    }

    // Sort the slice in descending order by age.
    sort.Slice(data, func(I, j int) bool {
        return data[I].Age > data[j].Age
    })

    // Marshal the slice into a JSON array.
    bytes, _ := json.Marshal(data)
    fmt.Println(string(bytes))
}

// Output:
// [{"Name":"Charlie","Age":50},{"Name":"Alice","Age":25},{"Name":"Bob","Age":24}]

Sorting data is an essential part of many applications. In this blog post, we discussed the various types of sorting available in Go and how to implement them.

Forget about provisioning & dockerization headaches—enjoy effortless deployments on AWS EKS in just a few clicks!

Gayathri R — Wed, 30 Nov 2022 15:19:28 +0000

Today, Amazon Elastic Kubernetes Service (EKS) is one of the widely used cloud providers for container-based applications. But setting up an AWS EKS cluster can be quite a challenge - from creating VPCs to security groups, ensuring auto scaling rules are in place on worker nodes and more. Once clusters have been set up, deploying applications requires specialized knowledge from various teams who need to invest time learning how to architect microservices before they can even begin working within containers!

As developers prepare to containerize their services, they will need to gain a comprehensive understanding of Docker, Kubernetes and systems configurations before transitioning their applications onto Amazon EKS. The complexity doesn't stop here. Once the applications are deployed to EKS clusters, developers then have to worry about integrating end-to-end DevOps automation including CI/CD pipelines and continuous monitoring capabilities.

Introducing gopaddle

gopaddle is a low-code Kubernetes platform that helps the developers, DevOps engineers and SREs to provision production-ready EKS clusters, build and deploy microservices on EKS without having to worry about complex configurations.

gopaddle offers quick start wizards to,

Register end-user's AWS Cloud Accounts using refined set of IAM rules.
Provision EKS cluster on end-users AWS Accounts - with sophisticated configurations like Self-managed nodepools, ALBs, Domain Manager integration etc.
Dockerize & Deploy microservices from code. gopaddle auto-generates the Dockerfiles and Kubernetes YAML files.
Generate Jenkins, GitHub Actions pipeline code.

In this blog, let us take a look at the process of creating an EKS cluster, Dockerizing and Deploying to EKS cluster using the quickstart wizard.

Prerequisite

gopaddle subscription [Free trailer] - http://portal.gopaddle.io/
AWS IAM user with the mentioned permissions.

Create an AWS EKS cluster

Creating an AWS EKS cluster through gopaddle is a 2 step process.

For that you have to login to your gopaddle account. You will find the quickstart wizards to create and deploy applications. Click on 'Onboard Cloud & Clusters' option.

In the quickstart wizard, provide the AWS account ID & select the region which you want to provision your EKS cluster.

Note: If you already installed AWS CLI on your machine then you can skip the AWS CLI installation step, which is step-1 in the Prerequisite section.

Then execute the shell script which is provided in the code mirror on your terminal. This will create an IAM user & provision an AWS EKS cluster.

Deploy an Application on the AWS EKS cluster

For the purpose of this blog, I have taken an Open-Source Java project from public GitHub repository & forked it to my GitHub repo.

Here is the sample project I used for the onboarding process - https://github.com/Gayathri-Bluemeric/spring-boot-hello-world.git.

Follow the below steps for deploying your application on AWS EKS cluster:-

Go to your gopaddle account's dashboard & click on the 'Dockerize & Deploy' Quick Start option.

Access Token

By default, it automatically picks your gopaddle account's default API token. You can also choose to use a different access token, especially when you have a distributed team with restricted permissions. Click on the 'Next' button.

2 . Cluster

Select the EKS cluster to dockerize the application and deploy. This cluster will be used to build the source code, generate the dockerfile and build the docker image.

3 . Docker registry

Docker registry to be used for pushing and pulling the Docker image.

For registering an AWS ECR registry, you need to provide the name & region where you would like to push the docker images and click on the 'Register Docker Registry' button.

4 . Allocation Policy

The CPU & Memory capacity to be used for building & deploying your source code project.

For creating an allocation policy, provide the name & build capacity required for building & deploying your source code project. Typically a Java Springboot application would require 800 millicore CPU / 1 G Memory request & limit.

5 . Source Code

The source code account where the microservice project exists. If your project is in a public repository then you don’t need to register the source code account at the moment. However, the continuous build (CI) option is not supported for a public repository.

For registering an GitHub account, generate the GitHub Personal Access Token and provide it on the 'Github Authentication Token' text box & click on the register button.

6 . Repository

Specifies the source code repository details like:

Clone URL - Source Code repository URL.
Branch - Branch name your source code project.
Project Type - Type of the project like NodeJs, Java, Python, etc.
Base Image - This base image will be used to launch a container inside which the project scripts are run and artifacts are prepared. The base image will also be used to prepare the project-specific docker image to be deployed in Kubernetes.
Build on Commit - When enabled, it creates a new Docker image as and when a new commit is detected in the source control repository. This capability is available only for a private source control repository.
Vulnerability Scan - When enabled, it scans for vulnerabilities in the docker image created during the build process.
Override Environment Variables - When enabled, it overrides any conflicting environment variables found in the base image and the user provided environment variables.

7 . Environment Variables

It is an optional step. If an Environment Variable (Env) is required to build or start (run) the application, then add the Env here.

For this example project I don't have such kind of ENVs, so I'm skipping this step.

8 . Scripts

Scripts that are required for building & deploying the project.

buildScript - How to build your source code project.
startScript - How to run/start your microservice project.
healthCheck - This script is used for validating the service's like which is alive or not. You can use the project endpoint also as a healthcheck URL.
stopScript - This script is used to cleaning up the processes after completing onboarding process.

Click on the 'Download the Scripts' button. It will download the Script files as a tar file in to your desktop. Untar the file and provide the extracted location in the quickstart wizard.

$ cd Downloads 
$ tar -xvf scripts.tar 

$ cd scripts
$ ls
buildScript.sh  healthCheck.sh  startScript.sh  stopScript.sh

$ pwd
/Users/gayathrir/Downloads/scripts

For instance the extracted folder will look like -/Users/gayathrir/Downloads/scripts
9 . Dockerize & Launch

This is the final step of the Quick Start Wizard. The Quick start wizard generates a Docker command. You can copy & execute the command on your desktop.

The docker command does the scaffolding process and automatically builds the application, pushes the docker image to the AWS ECR registry, enables CI, scans for vulnerability and deploys the application to the selected AWS EKS cluster.

Container 'spring-boot-hello-world' created successfully
Repository 'spring-boot-hello-world' created successfully
Distribution 'spring-boot-hello-world' created successfully
Container build triggered ...
Build in 'Creating' State [\]
Build created successfully
Expose port 8080 externally (Y/N)? y
Service 'spring-boot-hello-world' created successfully
Deployment Template 'spring-boot-hello-world' created successfully
Application ports mapped to Cluster node ports: [ 8080->32058 ]

Application deployment initiated ...
Launching Application [-]
Application 'spring-boot-hello-world' launched successfully

Access URL: http://18.141.182.44:32058
Use this command to purge the resources: gpctl init --purge

At the end of this process, the application is deployed on EKS and you will find the application access endpoint from the output.

Here, in this example, 'http://18.141.182.44:32058' is the access URL. You can access this application via browser.

Note: You have to open the firewall port (alternative target port number) on AWS EC2 instance security group's inbound rule.

Try out gopaddle for free for 15 days. Subscribe using https://portal.gopaddle.io/signUp

For more information regarding gopaddle, you can checkout https://gopaddle.io or reach us on slack.

Jumpstart modernization using the gopaddle quick start wizard

Gayathri R — Tue, 19 Jul 2022 14:15:32 +0000

The goal of modernization is to foster innovation by increasing developer productivity without compromising operational efficiency. On the contrary, an application modernization process is often a tedious and time consuming process. Developers spend a huge amount of time figuring out the nuances of the infrastructure and mapping it to their application stack. For instance, deploying a Java based application not only requires an architectural transformation to microservices, it also requires an understanding of the network, storage, performance (CPU/Memory utilization), installation and upgrade configurations before it can be containerized and deployed to Kubernetes. Once those configurations are mapped out, developers have to learn containerization technologies and Kubernetes before the application can be built and deployed to Kubernetes. The transformation does not stop here as the process is not complete without an end-to-end DevOps automation, which includes CI/CD automation, continuous monitoring and alerting capabilities.

Introducing gopaddle: gopaddle is a no-code Kubernetes platform that helps the developers, DevOps engineers and SREs to build, deploy and maintain cloud native applications in the fastest, cheapest and simplest way.

With the recent release v4.2.3, gopaddle platform has introduced a simple, yet a powerful mechanism to modernize and onboard the applications to Kubernetes.

Meet gopaddle’s Quick Start Wizard

gopaddle uses Quick Start Wizard to collect information about the application, by analyzing the Source code project like the nature of the project (Java, Javascript etc), suggesting some of the pre-built base image images, auto select continuous build and vulnerability scan etc. The quick start wizard helps to connect the end-to-end pipeline configuration like configuring github accounts, onboarding docker registries, onboarding cloud accounts, and auto generating the scripts to generate Dockerfile and the Kubernetes YAML files. The entire process takes only a few minutes and you have the complete end-to-end DevOps pipeline configuration in minutes.

Steps involved in the Quick Start Wizard

As soon as you log into the gopaddle platform, you can see the ‘Quick Start Wizard’ button in the top navigation panel. Once you click on that, you will land ion the quick start launch wizard. It has 9 steps.

Access Token - gopaddle’s Personal Access Token which is used for creating resources in gopaddle. By default, it picks the default API token pre-built into your account. You can choose to use a different access token, especially when you have a distributed team with restricted permissions.
Cluster - The k8s cluster to be used for building & deploying your microservice project.
Docker Registry - Docker registry to be used for pushing and pulling the Docker image.
Allocation Policy - The CPU & Memory capacity to be used for building & deploying your source code project.
Source Code - The source code account where the microservice project exists. If your project is in a public repository then you don’t need to register the source code account at the moment. However, the continuous build (CI) option is not supported for a public repository.
Repository - Specifies the source code repository details like:

Clone URL - Source Code repository URL.
Branch - Branch name your source code project.
Project Type - Type of the project like NodeJs, Java, Python, etc.
Base Image - This base image will be used to launch a container inside which the project scripts are run and artifacts are prepared. The base image will also be used to prepare the project-specific docker image to be deployed in Kubernetes.
Build on Commit - When enabled, it creates a new Docker image as and when a new commit is detected in the source control repository. This capability is available only for a private source control repository.
Vulnerability Scan - When enabled, it scans for vulnerabilities in the docker image created during the build process.
Override Environment Variables - When enabled, it overrides any conflicting environment variables found in the base image and the user provided environment variables.

7 . Environment Variables - It is an optional step. If an Environment Variable (Env) is required to build or start (run) the application, then add the Env here.
8 . Scripts - Scripts that are required for building & deploying the project .
9 . Dockerize & Launch - This is the final step of the Quick Start Wizard. The Quick start wizard generates a Docker command. You can copy & execute the command on your machine.

The docker command does the scaffolding process and automatically builds the application, pushes the docker image to the Docker registry, enables CI, scans for vulnerability and deploys the application to the chosen Kuberentes cluster.

In the entire process, developers do not have to worry about configuring multiple tools or writing Docker or Kubernetes manifests. Developers can now focus on the architectural transformation, while gopaddle Quick start wizard does the end-to-end Docker & Kubernetes transformation.

gopaddle also provides a set of pre-built pipeline templates that can be customized and reused. For instance the Azure DevOps pipeline template can be configured for customized workflow.

Try out gopaddle for free for 15 days. Subscribe using https://portal.gopaddle.io/signUp

For more information regarding gopaddle, you can reach us at hello@gopaddle.io

Image courtesy by freepik - www.freepik.com

Jenkins. Invalid agent type "docker" specified. Must be one of [any, label, none]

Gayathri R — Mon, 18 Jul 2022 07:59:08 +0000

While executing the docker container inside the jenkins (pipeline) failed with below error.

org.codehaus.groovy.control.MultipleCompilationErrorsException: startup failed:
WorkflowScript: 3: Invalid agent type "docker" specified. Must be one of [any, label, none] @ line 3, column 9.
           docker { image 'ubuntu:18.04' }

You have to install 2 plugins: Docker and Docker Pipeline plugin.

Go to Jenkins root page > Manage Jenkins > Manage Plugins > Available and search for the plugins.

Hope that helps.

Zero-cost automation for Kubernetes developers - A self-hosted DevOps platform

Gayathri R — Thu, 14 Jul 2022 05:42:55 +0000

Kubernetes containerization and container orchestration are rapidly increasing, according to the Cloud Native Survey from 2020, the usage of containers in production jumped 300%. But simultaneously the challenges involved in the onboarding process all increased, as per a report by D2IQ almost all organizations (96%) face challenges and complexities during initial deployments of containerized applications (called Day 2 Operations in DevOps language) and cite Kubernetes as a source of pain. In this blog, I’m going to highlight the challenges in adopting Kubernetes & how gopaddle lite (Community Edition) resolves it.

Challenges adopting Kubernetes

Deployment Complexities and manual tasks

Deploying an application into Kubernetes are not effortless as it involves a lot of manual scripting. For instance, to deploy an application to Kubernetes an engineer has to write manifest files in YAML or JSON format and write kubectl commands to deploy those manifest files. For a single application, it might be an easy process but to deploy multiple applications by multiple developers across multiple environments (DEV/QA/PROD) across multiple clouds and on-premise environments - it's an arduous task.

Overdependent on experts and burnout

Lack of Kubernetes knowledge and expertise makes developers and application teams heavily dependent on the DevOps or the Site Reliability Engineering (SRE) teams to continuously help them create K8s manifiests and automate continuous monitoring, alerting, and remediation to keep the applications highly available. The process of follow-up and collaboration across various teams to get the changes deployed takes away a lot of time from all the stakeholders. Furthermore, with shorter deadlines and immense pressure to meet the business objectives, the teams end up spending long hours deploying their changes.

Dealing with security challenges

Kubernetes does not enforce security policies. Developers have to configure policies to discover vulnerabilities and security issues in their application and in their Kubernetes environments.

How gopaddle lite simplifies Kubernetes adoption?

gopaddle lite Community Edition is an easy-to-manage Kubernetes automation platform for startups, developers, and learners. It is a no-code platform to build, deploy and maintain Kubernetes workloads on Kubernetes environments on local desktops, on-premise, and on a cloud. It offers three main capabilities:

Accelerate modernization — With its intelligent scaffolding, gopaddle can transform code into Kubernetes deployments in minutes.
Increase productivity — With its out-of-the-box tools integration and ready-to-use templates (gopaddle marketplace), gopaddle reduces the overhead of tedious maintenance and increases productivity.
Automate CI/CD — Automates DevOps processes, like Continuous Integration and Deployments, monitoring, logging, and alerting.

	Traditional Method	gopaddle Lite
Base Image	Manual Preparation	Intelligent scaffolding discovers the application and suggests best-fit base Images based on the nature of the application
Dockerfile	Manual	Auto-Generated
YAML or JSON	Manual	Auto-Generated
vulnerability scans	Third-Party Tools	Native and customizable
Complexity	High	Low
Time duration for the entire process	Months	Mins to hours based on the nature of the application
Continuous Integration	Requires automation effort	Built-in
Monitoring/Logging	Requires automation effort	Built-in
Alerts and Notifications	Requires automation effort	Built-in & can be integrated with 3rd party tools

Installing gopaddle lite on your local desktop (or) on-premise (or) cloud-based is just a 2 step process. As a pre-requisite, you need to setup microk8s cluster v 1.24 on an environment with 32GB RAM and 8 vCPU. Once the microk8s cluster is ready, you can add the gopaddle lite repo to microk8s addon and then enable it. This brings up all the gopaddle lite services as Kubernetes services and waits for all the services to move to running state.

$ sudo microk8s addons repo add gp-lite \
 https://github.com/gopaddle-io/microk8s-community-addons-gplite.git

$ sudo microk8s enable gopaddle-lite

For more information, you can check out https://github.com/gopaddle-io/microk8s-community-addons-gplite/tree/4.2.3.

Once the installation is complete, the gopadde lite installer displays an endpoint using which you can access the gopaddle lite dashboard from the browser.

The installation takes about 10 - 15 minutes to complete and you have the self-hosted Kubernetes solution in your local environment.

For more information regarding gopaddle lite, you can reach us at hello@gopaddle.io or join our slack channel.

ReactJs QR Code Generator

Gayathri R — Sun, 10 Jul 2022 13:49:17 +0000

QR (Quick Response) codes are capable of storing lots of data, and users can easily access the information by scanning the QR code. In this blog, I'm going to explain to you how to create a QR Code Generator App using ReactJs.

Here's a preview:

Let's get started...

Create a new React Js project.

$ npx create-react-app qr-code-generator 
$ cd qr-code-generator
$ npm start

Open the application into a VSCode editor. In that, expand the 'src' folder. Inside that you can see two files that is, 'App.css' and 'App.js'. Here App.js is the only default component of our app that contains all the logic. We will be using a free opensource (no auth requires) API called ‘create-qr-code’ to fetch the required QR code image.

Now write down the following code in the App.js file.

import { useEffect, useState } from 'react';
import {useRef} from 'react';
import './App.css';

function App() {

  const inputRef = useRef(null);
  const [qrUrl, setWord] = useState("");
  const [qrImg, setQrCode] = useState("");
  const [active, setQrCodeStatus] = useState("");

  useEffect(() => {
    setQrCode
  (`http://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${qrUrl}`);
  },);

  function generateQR() {
    let qrValue = inputRef.current.value.trim();
    if(!qrValue) return;
    setWord(qrValue);
    setQrCodeStatus("active");
  }

  const inputChange = event => {
    if(event.target.value === '') setQrCodeStatus('inActive');
  };

  return (
    <div className={ `wrapper ${active} === 'active' ? "wrapper active" : "wrapper"` }>
      <header>
        <h1>QR Code Generator</h1>
        <p>Paste a url or enter text to create QR code</p>
      </header>
      <div class="form">
        <input ref={inputRef} onChange={inputChange} type="text" id="qr_code" name="qr_code" spellcheck="false" placeholder="Enter text or url" />
        <button onClick={generateQR}>Generate QR Code</button>
      </div>
      <div class="qr-code">
        <img src={qrImg} alt="qr-code" />
      </div>
    </div>
  );
}

export default App;

Now, let’s edit the file named App.css to design our app.

/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  padding: 0 10px;
  min-height: 100vh;
  align-items: center;
  background: #3498DB;
  justify-content: center;
}
.wrapper{
  height: 265px;
  max-width: 410px;
  background: #fff;
  border-radius: 7px;
  padding: 20px 25px 0;
  transition: height 0.2s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.wrapper.active{
  height: 530px;
}
header h1{
  font-size: 21px;
  font-weight: 500;
}
header p{
  margin-top: 5px;
  color: #575757;
  font-size: 16px;
}
.wrapper .form{
  margin: 20px 0 25px;
}
.form :where(input, button){
  width: 100%;
  height: 55px;
  border: none;
  outline: none;
  border-radius: 5px;
  transition: 0.1s ease;
}
.form input{
  font-size: 18px;
  padding: 0 17px;
  border: 1px solid #999;
}
.form input:focus{
  box-shadow: 0 3px 6px rgba(0,0,0,0.13);
}
.form input::placeholder{
  color: #999;
}
.form button{
  color: #fff;
  cursor: pointer;
  margin-top: 20px;
  font-size: 17px;
  background: #3498DB;
}
.qr-code{
  opacity: 0;
  display: flex;
  padding: 33px 0;
  border-radius: 5px;
  align-items: center;
  pointer-events: none;
  justify-content: center;
  border: 1px solid #ccc;
}
.wrapper.active .qr-code{
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.5s 0.05s ease;
}
.qr-code img{
  width: 170px;
}

@media (max-width: 430px){
  .wrapper{
    height: 255px;
    padding: 16px 20px;
  }
  .wrapper.active{
    height: 510px;
  }
  header p{
    color: #696969;
  }
  .form :where(input, button){
    height: 52px;
  }
  .qr-code img{
    width: 160px;
  }  
}

Step to Run Application: Run the application using the following command from the root directory of the project:

$ npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Don’t forget to star the repo on GitHub. Stars keep me motivated and are highly appreciated.

Code reviews welcome. Let me know if I can do something better.

How to resolve CORS issue in VueJs

Gayathri R — Sun, 26 Jun 2022 16:24:22 +0000

Web applications often depend on resources from an external source or domain. For example, a website can display an image hosted on another site. Beyond images, a web application may fetch JSON format data from an external API.

However, sharing resources across websites isn't always a smooth ride. If you've made HTTP requests from JavaScript to another site, you've probably seen a CORS error.

In this blog I'm going to explain what is CORS policy & how to resolve the CORS problem.

Let's get started...

What Is CORS?

The full meaning of CORS is Cross-Origin Resource Sharing. CORS is a mechanism that can be found in modern web browsers like Chrome, Firefox, Safari, and Edge. It prevents Domain A from accessing resources on Domain B without explicit permission.

For reproducing this issue, I have developed a simple golang based backend project & I integrated the APIs with VueJs frontend code.

Vue will spin up a simple web server that listens on port 8080 and serves the frontend. This is great for easy development, but we will run into problems when calling our API.

Let’s open the http://localhost:8080 page:

We can see that while triggering the API call browser gives a CORS error. This is because http://localhost:8080 and http://localhost:3000 are considered different domains and thus the CORS policy comes into play.

How To Fix CORS Errors

We can fix this CORS problem in two ways,

1) Allow CORS requests from the backend server

With the Access-Control-Allow-Origin header, we can specify what origins can use our API.

We can set it to http://localhost:8080 or '*' to allow our Vue app to call it:



func respondWithJson(w http.ResponseWriter, code int, payload interface{}) {
    response, _ := json.Marshal(payload)
    w.Header().Set("Content-Type", "application/json")
    w.Header().Set("Access-Control-Allow-Origin", "*")
    w.WriteHeader(code)
    w.Write(response)
}

2) Setup a development proxy in VueJs

During development, you often see that the backend server is running on a different port than the frontend server.

This is also the case with our example where the frontend server runs on localhost:8080 and the backend server runs on localhost:3000.

To set up this proxy system, we can create a vue.config.js file in the root of the Vue project:



module.exports = {
  devServer: {
    proxy: {
      '^/users': {
        target: 'http://localhost:3000/',
        ws: true,
        changeOrigin: true
      },
    }
  }
}

We should then also change the backend urls in the Axios calls. That is, instead of providing the backend URL either we need to remove the domain or we should provide the FrontEnd domain.



listUsers(){
   var url = "/users";
   return axios({
      url: url,
      method: 'GET',
   }).then(result => {
      this.model = result.data;
      this.$emit('listUsers', this.model);
      return result;
   }).catch(error => {
      console.log(error);
      throw error;
   });
},

Here, I removed the domain while making the API call.

Let’s try it again!

Now we see that the browser is allowed to access the API.

Messaging with Cloud Native Kubernetes Apache Kafka Cluster

Gayathri R — Wed, 04 May 2022 12:25:28 +0000

In this blog, I'm going to cover what are the problems of using data pipelines to establish a connection between servers across the network and how Kafka's messaging system resolves that problem.

Need for a messaging system

In the real-time scenario, we have different system process services which will be communicating with each other. And data pipelines are the ones which are establishing connections between two servers or two systems.

Now let's take an example of an e-commerce website, it has multiple servers for the front-end like a member application server for hosting applications, it has chat servers for customers' chat service facilities, separate servers for payment, etc. Similarly, organizations can also have multiple servers at the back-end which will be receiving messages from different front-end servers based on the requirements. For example, they can have database servers that will be storing the records, security systems for user authentication and user authorization, Real-time monitoring servers, etc. So all these data pipelines become complex with an increased number of systems. And adding a new system or server requires more data pipelines, which will again make the data flow more complex. Now managing these data pipelines also become very difficult as each data pipelines have a different set of requirements. For example, data pipelines that handle transactions should be more fault-tolerant and robust. Because of this complexity, the "Messaging System" was originated. Messaging system reduces the complexity of data pipelines and makes the communication between systems simpler and manageable. Using the messaging system you can quickly establish remote connections and send your data across the network.

Let's see how Kafka resolves this problem, Kafka decouples the data pipeline and solves the complexity problem. The applications which are producing messages to Kafka are called "producers" and the applications which are consuming those messages from Kafka are called "consumers".

In the above diagram, Web-Client, Application-1, Application-2, etc are producing messages to Kafka. These are called producers. Then the Database servers, Security systems, Real-time monitoring, etc these are basically consuming the messages and these are called consumers. So the producers send the messages to Kafka and Kafka stores those messages and consumers who want those messages can subscribe and receive them.

In this workflow, multiple consumers can consume the same application servers by subscribing to it, as well as adding a new service or system and removing an existing system are very easy.

What is Kafka?

Apache Kafka is a distributed public-subscribe messaging system. Messaging traditionally has two models. That is, Queuing and Public-Subscribe. In a queue, a pool of consumers may read from a server, and each record only goes to one of them. Whereas Public-Subscribe, the record is broadcasted to all the consumers so that multiple consumers can get the records.

Kafka is faster, scalable, and fault-tolerant because the Kafka cluster is distributed and has multiple machines running in parallel. It was originally developed on LinkedIn and later on become a part of the Apache foundation.

Kafka terminologies

1 . Topic

A topic is a category or feed name to which records are published. Topics in Kafka are always multi-subscriber. This means that a topic can have zero, one, or many consumers that subscribe to the data written to it.

2 . Partitions

Kafka topics are divided into a number of partitions. And partitions allow you to parallelize a topic by splitting the data into a particular topic across multiple brokers. This means each partition can be placed on separate machines to allow various consumers to read from a topic parallelly.

For example, you have a sales topic with 3 partitions as partition-0, partition-1, and partition-2. So always 3 consumers can read data parallelly.

3 . Producers

Producers publish data on the topics of their choice. The producer is responsible for choosing which record to assign to which partition within the topic.

4 . Consumers

Consumers label themselves with a consumer group name, and each record published to a topic is delivered to one consumer instance within each subscribing consumer group. Consumer instances can be in separate processes or on separate machines.

5 . Brokers

Kafka cluster is a set of servers, each of which is called brokers.

6 . Zookeeper

Zookeeper is another Apache open-source project, it stores the metadata information related to the Kafka cluster like brokers information, topics details, etc. So zookeeper is basically the one who is managing the whole Kafka cluster.

Kafka basic commands

These are the basic Kafka commands for producing and consuming messages.

Go to kafka home,

Create new topic:

bin/kafka-topics.sh --create --zookeeper localhost:2181 --replication-factor 1 --partitions 3--topic [scenario]

List existing topics:

bin/kafka-topics.sh --zookeeper localhost:2181 --list

Describe a topic:

bin/kafka-topics.sh --zookeeper localhost:2181 --describe --topic mytopic

Delete a topic:

bin/kafka-topics.sh --zookeeper localhost:2181 --delete --topic mytopic

Purge a topic:

bin/kafka-topics.sh --zookeeper localhost:2181 --alter --topic mytopic --delete-config retention.ms

Consume messages with the console consumer:

bin/kafka-console-consumer.sh --new-consumer --bootstrap-server localhost:9092 --topic mytopic --from-beginning

List the consumer groups known to Kafka:

bin/kafka-consumer-groups.sh --zookeeper localhost:2181 --list

(Or)

bin/kafka-consumer-groups.sh --new-consumer --bootstrap-server localhost:9092 --list

View the details of a consumer group:

bin/kafka-consumer-groups.sh --zookeeper localhost:2181 --describe --group <group name>

Conclusion

In this article, I've covered the problems of using data pipelines and how Kafka's messaging system resolves that issues. Also, I've explained some important commands and terminologies of Kafka.

Hope this is helpful.

How to add a Typewriter animation in VueJs

Gayathri R — Sat, 23 Apr 2022 15:20:58 +0000

In this blog, I'm going to explain to you how to make a typing animation in VueJs.

Here's a preview:

Let's get started...

Create a new VueJs project.



$ vue create animations-vuejs

Vue CLI v5.0.4
? Please pick a preset: Default ([Vue 3] babel, eslint)


Vue CLI v5.0.4
✨  Creating project in /home/user/tutorials/animations-vuejs.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...


added 839 packages, and audited 840 packages in 35s

84 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
🚀  Invoking generators...
📦  Installing additional dependencies...


added 97 packages, and audited 937 packages in 9s

94 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project animations-vuejs.
👉  Get started with the following commands:

 $ cd animations-vuejs
 $ npm run serve

Template

The template is quite simple. To create the typewriter effect, you need an element for static text and an element for changing text. This component contains three span tags encapsulated in a div.



<template>
  <div class="container">
    <h1>
      Hi, I'm a
      <span class="typed-text">{{ typeValue }}</span>
      <span class="blinking-cursor">|</span>
      <span class="cursor" :class="{ typing: typeStatus }">&nbsp;</span>
    </h1>
  </div>
</template>

Styles

I've used my own custom styling for displaying the contents & cursor blinking. Here is the code,



<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
h1 {
  font-size: 6rem;
  font-weight: normal;
  span.typed-text {
    color: #d2b94b;
  }
}

// Cursor blinking CSS Starts...
.blinking-cursor {
  font-size: 6rem;
  color: #2c3e50;
  -webkit-animation: 1s blink step-end infinite;
  -moz-animation: 1s blink step-end infinite;
  -ms-animation: 1s blink step-end infinite;
  -o-animation: 1s blink step-end infinite;
  animation: 1s blink step-end infinite;
}
@keyframes blink {
  from,
  to {
    color: transparent;
  }
  50% {
    color: #2c3e50;
  }
}
@-moz-keyframes blink {
  from,
  to {
    color: transparent;
  }
  50% {
    color: #2c3e50;
  }
}
@-webkit-keyframes blink {
  from,
  to {
    color: transparent;
  }
  50% {
    color: #2c3e50;
  }
}
@-ms-keyframes blink {
  from,
  to {
    color: transparent;
  }
  50% {
    color: #2c3e50;
  }
}
@-o-keyframes blink {
  from,
  to {
    color: transparent;
  }
  50% {
    color: #2c3e50;
  }
}
// Cursor blinking CSS Ends...
</style>

Info Using SCSS inside the VueJs (Default ([Vue 3] babel, eslint)) components you may face 'sass-loader' issues. Please refer to this blog for fixing the problem.

Script

Data

This component mainly contain 5 values: typeValue, displayTextArray, typingSpeed, erasingSpeed, and newTextDelay. The typeValue field is the static text. The displayTextArray field is an array of changing words. The typingSpeed field is the typing speed, and the erasingSpeed field is the delete speed. The newTextDelay field is the delay time seconds to start printing the next word.



data: () => {
    return {
      typeValue: "",
      typeStatus: false,
      displayTextArray: ["YouTuber", "Developer", "Blogger", "Designer", "Freelancer"],
      typingSpeed: 100,
      erasingSpeed: 100,
      newTextDelay: 2000,
      displayTextArrayIndex: 0,
      charIndex: 0,
    };
  },

Methods

typeText() & eraseText()

These methods contain all the logic to determine which word is being typed, whether to type or delete, or to change to the next word based on the 'typeStatus' field. Take a look below.



methods: {
    typeText() {
      if (this.charIndex < this.displayTextArray[this.displayTextArrayIndex].length) {
        if (!this.typeStatus) this.typeStatus = true;
        this.typeValue += this.displayTextArray[this.displayTextArrayIndex].charAt(
          this.charIndex
        );
        this.charIndex += 1;
        setTimeout(this.typeText, this.typingSpeed);
      } else {
        this.typeStatus = false;
        setTimeout(this.eraseText, this.newTextDelay);
      }
    },
    eraseText() {
      if (this.charIndex > 0) {
        if (!this.typeStatus) this.typeStatus = true;
        this.typeValue = this.displayTextArray[this.displayTextArrayIndex].substring(
          0,
          this.charIndex - 1
        );
        this.charIndex -= 1;
        setTimeout(this.eraseText, this.erasingSpeed);
      } else {
        this.typeStatus = false;
        this.displayTextArrayIndex += 1;
        if (this.displayTextArrayIndex >= this.displayTextArray.length)
          this.displayTextArrayIndex = 0;
        setTimeout(this.typeText, this.typingSpeed + 1000);
      }
    },
  },

Created Lifecycle

When the component is loaded, it calls the typeText() method to begin the typing sequence.



created() {
   setTimeout(this.typeText, this.newTextDelay + 200);
},

Here's the final code:



<template>
  <div class="container">
    <h1>
      Hi, I'm a
      <span class="typed-text">{{ typeValue }}</span>
      <span class="blinking-cursor">|</span>
      <span class="cursor" :class="{ typing: typeStatus }">&nbsp;</span>
    </h1>
  </div>
</template>

<script>
export default {
  name: "typeWiriter",
  data: () => {
    return {
      typeValue: "",
      typeStatus: false,
      displayTextArray: ["YouTuber", "Developer", "Blogger", "Designer", "Freelancer"],
      typingSpeed: 100,
      erasingSpeed: 100,
      newTextDelay: 2000,
      displayTextArrayIndex: 0,
      charIndex: 0,
    };
  },
  props: {},
  created() {
    setTimeout(this.typeText, this.newTextDelay + 200);
  },
  methods: {
    typeText() {
      if (this.charIndex < this.displayTextArray[this.displayTextArrayIndex].length) {
        if (!this.typeStatus) this.typeStatus = true;
        this.typeValue += this.displayTextArray[this.displayTextArrayIndex].charAt(
          this.charIndex
        );
        this.charIndex += 1;
        setTimeout(this.typeText, this.typingSpeed);
      } else {
        this.typeStatus = false;
        setTimeout(this.eraseText, this.newTextDelay);
      }
    },
    eraseText() {
      if (this.charIndex > 0) {
        if (!this.typeStatus) this.typeStatus = true;
        this.typeValue = this.displayTextArray[this.displayTextArrayIndex].substring(
          0,
          this.charIndex - 1
        );
        this.charIndex -= 1;
        setTimeout(this.eraseText, this.erasingSpeed);
      } else {
        this.typeStatus = false;
        this.displayTextArrayIndex += 1;
        if (this.displayTextArrayIndex >= this.displayTextArray.length)
          this.displayTextArrayIndex = 0;
        setTimeout(this.typeText, this.typingSpeed + 1000);
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
h1 {
  font-size: 6rem;
  font-weight: normal;
  span.typed-text {
    color: #d2b94b;
  }
}

// Cursor blinking CSS Starts...
.blinking-cursor {
  font-size: 6rem;
  color: #2c3e50;
  -webkit-animation: 1s blink step-end infinite;
  -moz-animation: 1s blink step-end infinite;
  -ms-animation: 1s blink step-end infinite;
  -o-animation: 1s blink step-end infinite;
  animation: 1s blink step-end infinite;
}
@keyframes blink {
  from,
  to {
    color: transparent;
  }
  50% {
    color: #2c3e50;
  }
}
@-moz-keyframes blink {
  from,
  to {
    color: transparent;
  }
  50% {
    color: #2c3e50;
  }
}
@-webkit-keyframes blink {
  from,
  to {
    color: transparent;
  }
  50% {
    color: #2c3e50;
  }
}
@-ms-keyframes blink {
  from,
  to {
    color: transparent;
  }
  50% {
    color: #2c3e50;
  }
}
@-o-keyframes blink {
  from,
  to {
    color: transparent;
  }
  50% {
    color: #2c3e50;
  }
}
// Cursor blinking CSS Ends...
</style>

Do you like this solution? Don’t forget to star the repo on GitHub. Stars keep me motivated and are highly appreciated.

Code reviews welcome. Let me know if I can do something better.

How to resolve "multi-word vue/multi-word-component-names" issue in VueJs 3 default option.

Gayathri R — Fri, 22 Apr 2022 04:09:01 +0000

Problem:-

While running the VueJs application failed with "Multi-word vue/multi-word-component-names" error.

/home/user/tutorials/animations-vuejs/src/components/HelloWorld.vue
  35:9  error  Component name "hello" should always be multi-word  vue/multi-word-component-names

✖ 1 problem (1 error, 0 warnings)

Solution:-

This problem is due to the 'eslint' setting issues. By default, the linting rule is enabled in Vuejs (Default ([Vue 3] babel, eslint)).

You can resolve this problem in two ways,

Method - 1:

Rename the component name. Here in this case the component name provided is 'hello', you can change this as a multi-word like 'HelloWorld'.

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}

Method - 2:

Disable the linting rule. By disabling the 'eslint' execute the below command.

$ npm remove @vue/cli-plugin-eslint

Jenkins not executing jobs (pending – waiting for next executor)

Gayathri R — Tue, 19 Apr 2022 07:45:21 +0000

Problem

In jenkins while executing multiple jobs in parallel. Upto a specific number of jobs are running in parallel, but beyond that, if we submit any job, it was going to waiting state.

Solution

In this case, jenkins is executing jobs in parallel upto some number. That means somewhere we need to increase the parallelism paramater.

go to Jenkins -> Manage Jenkins -> Manage Nodes
check whether all nodes are active and healthy
Check whether disk space is available in nodes

If everything is fine and if the machine have enough hardware configuration, you can increase the number of executors.

How to increase no of executors in jenkins

By default Jenkins has 2 executors. But you can increase the no of executors. You can follow the below given steps.

Go to manage Jenkins.
After that click om configure system.
Inside configure Jenkins you can find #of executors parameter.

Now you can set your desire executors.

How to resolve "Failed to resolve loader: sass-loader" Error in VueJs 3?

Gayathri R — Tue, 19 Apr 2022 06:53:56 +0000

How to resolve "Failed to resolve loader: sass-loader" (or) "TypeError: this.getOptions is not a function" Issue in VueJs 3?

Solution:-

cd <Root of the Project Directory>
npm install -D sass-loader@10.1.1 sass
rm -rf node_modules
npm install
npm run serve