Although platforms like vercel, renderer also supports deploying your backend in a click but it is always recommanded to host your backend in your own server using a cloud platform like AWS, GCP, Azure etc because those platforms ( vercel and renderer ) adds latency and stops working when not hitted for weeks.

While you are developing a Full Stack Project as a side project or for a hackathon, you may encountered the problem of deploying your backend. So I am gonna make this easy for you by writing this blog.

Let’s get started. 💪

I will not gonna explain how to setup a AWS account. It should be straight forward if you are a dev. 🤷‍♂️

Launch EC2 instance

To launch a EC2 instance, search EC2 in the search bar and select it then click on the Launch instance button.

Now, you will get the below screen.

Give a name to your server and select the Ubuntu OS image.

Keep the Instance type as t2.micro for the free tier (It gives 750 hours per month of t2.micro instance usage) and then create a key pair if you don’t have one or use the existing one.

‼️ You should have the pem file in your computer to SSH to this server so keep it safe.

Now in the Network settings you can allow HTTPS and HTTP traffic from the internet by selecting the checkboxes.

Now you can click on the Launch instance button in the right side.

You can check all your running instances over EC2 > Instances

SSH EC2 Server

SSH connection to your newly created EC2 server is simple. Just click on the instance ID from the row and copy the Public DNS. Then do the following:

• Open your terminal

• Locate your private key file in the terminal using the cd command

• Change the file permission of the pem file using the below command to make sure that the file is not publicly viewable

    chmod 400 "your-pem-file-name.pem"
  

• Connect to your server’s public DNS using SSH

    ssh -i "your-pem-file-name.pem" ubuntu@your_public_dns
  

After running the above command, you will see this screen and then you are good to run commands remotely in your AWS EC2 server.

Writing a simple backend

Let’s write a simple backend using Express.js. The backend will simply increment a counter and store the value in a variable and you can also retrieve the counter value using another route. You can deploy any of your backend code using this method.

• Create a folder named “backend-test“ or anything of your choice and cd into it.

• Install the required packages using npm

    npm install express
  

• Create a index.js file and paste the below code there.

    const express = require("express")
  
    const app = express();
  
    const PORT = 8000;
  
    let counter = 0;
  
    app.get("/incre", (req, res) => {
        counter++;
  
        res.status(200).json({message:"Incremented the counter successfully"})
    })
  
    app.get("/status", (req,res) => {
        res.status(200).json({message:"status fetched successfully", counter})
    })
  
    app.listen(PORT, () => {
        console.log(`Server is running at ${PORT}`)
    })
  

• Now run the server using the below command. This will run the server in your local environment. You can test the endpoints in postman or directly from the browser since these are GET endpoints.

    node index.js
  

Now you have to push your local code to GitHub so that you can pull it in your EC2 server and spin it up there.

Setup Backend Code in EC2

Until now you pushed your local backed code to GitHub. Now you have to pull it into your EC2 server. So do the following to start the backend in your EC2 server.

• SSH into the server using the above instructions

• Install Node in the EC2 server using NVM ( Node Version Manager )

    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
  

  Now exit from the ubuntu shell and again SSH. Then run the below command

    nvm install --lts
  

  It will download the latest LTS version of node into the server. You can check the node version using the node —-version command.

• Now pull your code from the GitHub using the below command and cd into the folder.

    git pull "<Github Repo URL>"
  

• Now install the node modules using npm install command and start the index file using the node index.js command

• Now you can hit the public DNS with the given port of your backend application, in this case it is 8000. But you will see that it can’t hit the URL, it will keep loading

  

• In this case you need to update the inbound roules of the security group.

  

  

• Now again try hitting the public DNS with the port and correct route. You will see the response like below

  

  But, you can see that it is showing Not Secure in the search bar. We will fix it by adding a certificate to it.

Setup NGINX

Before setting up nginx, you need to know why we are using nginx.

Nginx (pronounced "engine-X") is an open-source web server and reverse proxy, widely recognized for its high performance, scalability, and low resource usage. It also functions as a load balancer, HTTP cache, and mail proxy.

Here we will use nginx as a reverse proxy. A reverse proxy server acts as an intermediary between clients and one or more backend servers. It sits in front of the servers, receiving client requests and forwarding them to the appropriate server, while also returning responses from the server back to the client.

Now let’s install and setup nginx into the EC2 server using the below steps:

• Installing nginx

    sudo apt update
    sudo apt install nginx
  

• After installing nginx, try hitting the same public DNS and you will see the following response if it is successfully installed.

  

• Now we will create the reverse proxy. To do that run the below commands in the root of the server

    sudo rm sudo vi /etc/nginx/nginx.conf
    sudo vi /etc/nginx/nginx.conf
  

  And paste the below code into it.
  Please replace the server name with your own purchased domain name.

    events {
        # Event directives...
    }
  
    http {
        server {
        listen 80;
        server_name bt.ronakpaul.com;
  
        location / {
            proxy_pass http://localhost:8000;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
        }
        }
    }
  

Domain and Certificate

Now you need to add domain name record to point your domain name to the server ip address. To do so, go to the platform from where you had purchased the domain, for me it is hostinger.

Add a A name record to the platform like below. You can give any subdomain name and it should point to the AWS EC2 public ip address.

Now you can see that we can hit the server using our own domain

Now we have to add the certificate, so that it can be accessed using https. To add a certificate, do the following:

• Run this command in the server to install Certbot.

    sudo snap install --classic certbot
  

• Execute the following command in the server to ensure that the certbot command can be run.

    sudo ln -s /snap/bin/certbot /usr/bin/certbot
  

• Now, run the below command to get a certificate and have Certbot edit your nginx configuration automatically to serve it, turning on HTTPS access in a single step.

    sudo certbot --nginx
  

• It’s done. Now you just need to run the index.js file using pm2 ( Process Manager 2 ) so that the process does not stop when you exit from the terminal or shutdown the pc. To do so, install pm2 by the below command

    npm install pm2 -g
  

  Start the index.js file using pm2

    pm2 start index.js
  

Now you can finally see that your backend is fully deployed and accessable over https on your own domain.

So you now can connect your backend with frontend by hitting it with fetch or axios.

Happy coding guys ☕️

Introduction

Kestra is a open source orchestration platform for making and managing your workflows. And to make any workflows in Kestra you just need to write YAML. Nothing fancy over here. Isn’t it cool ?

Not only this, in kestra you can schedule your workflows using cron jobs ( cron jobs are use to schedule some task for execution in specific time interval ). And also you can trigger a flow when somethings happens on other platforms like AWS, GitHub etc.

Kestra also has hundreds of plugins for different usecases. Like for connecting different services such as MongoDB, dynamoDB, ApacheKafka etc. Which you can integrate to your workflow.

Here is the official site of Kestra: kestra.io

Running Kestra

Kestra has a cloud hosted platform but it is in private alpha stage ( eagerly waiting for the public launch ). But you can run Kestra on your local device using Docker. Although there are other methods to run kestra, which you can checkout here.

Prerequisites

• Docker installed on your machine

• Smile on your face 😄

Steps

1. Spinning up docker container for kestra in your terminal by the below command

docker run --pull=always --rm -it -p 8080:8080 --user=root -v /var/run/docker.sock:/var/run/docker.sock -v /tmp:/tmp kestra/kestra:latest server local

Note: By this method your works in the Kestra will not be persistent. So make sure to store the YAML files on separate folder.

2. Now go to your browser and enter http://localhost:8080 in the address bar, hit enter.

Now you are good to get started with Kestra.

Let’s now understand some key terms in Kestra.

Flows

In Kestra, Flows defines how your workflow will looklike in a YAML file format. And after writing the flow in YAML, you can also see its topology or visual representation of the flow in the Topology section. A YAML file for the flow keeps it language agnostic.

A simple example of Kestra flow is given below:

id: first_flow_example
namespace: ronak.blog
description: "Flow is to just log a message"

tasks:
  - id: logging_task
    type: io.kestra.plugin.core.log.Log
    message: "Successfully executed a kestra flow with log"

In the above kestra flow there are certain keywords which I am explaining in detail below:

In each flow, there are three required fields: id, namespace, tasks

• id: The id field is use to give a name to a flow. Each flow’s id in the same namespace should be different but for different namespaces it could be same as well.

• namespace: You can think namespaces as like a folder structure. Where you can segregate different flows according to their namespace. And you can’t change a flow’s namespace once it is created or saved.

• tasks: The tasks field is use to define one or multiple tasks for the flow. And the tasks will execute as per the order i.e. top to bottom. Each task has its own id, type, and other fields associated with that type. In the type field you can choose what kind of task you want to do like fetching documents from mongodb or dynamodb etc. Each task type is already predefined. You can see the documentation to see all the task types, although I will be explaining some of the popular and frequently used task types in this blog.

• description: The description field is a optional field, which is use to just give a description to the flow for much more clarity. We can give description to each tasks as well.

Task Types

Kestra provides multiple task types like Core, Scripts, Internal Storage, KV Store, Plugins. Some of the popular and frequently used task types are given below:

• io.kestra.plugin.core.log.Log: This task type is use to log messages in the Kestra log section while executing a flow. Checkout Doc

• io.kestra.plugin.core.http.Requests: This task type is use to make a http request for the given uri. Checkout Doc

• io.kestra.plugin.scripts.python.Script: This task type is use to run Python code in a task. Checkout Doc

• io.kestra.plugin.mongodb.Find: This task type is use to fetch documents from a given mongodb database uri. Checkout Doc

• io.kestra.plugin.git.Clone: This task type is use to clone a repository from GitHub. Checkout Doc

• io.kestra.plugin.scripts.node.Script: This task type is use to run Javascript on Node runtime in a task. Checkout Doc

For all the plugins and task types checkout here.

Note: I will be writing a separate blog on various cool task types

Inputs

As we take inputs in programming languages to make our program more dynamic. We. can also take inputs in Kestra workflow to make our workflow more dynamic. The concept is simple you can take input from the user and depending on that you can execute your flow.

In kestra, inputs is a key-value pair, which contains id, type, defaults fields in YAML.

Below is a simple flow with inputs:

id: flow-with-inputs
namespace: ronak.blog

inputs:
  - id: name
    type: STRING
    default: "Ronak"

  - id: age
    type: INT
    default: 20

tasks:
  - id: logging_task
    type: io.kestra.plugin.core.log.Log
    message: "My name is: {{inputs.name}} and age is {{inputs.age}}"

In the above YAML file, we have inputs field which contains two types of inputs one is name (STRING) and age (INT). And we are accessing the inputs in our tasks by the following syntax inputs.[input_id]

We can do more complex kind of inputs as well like SELECT, DATE etc. But I will discuss those in a separate blog in depth.

But if you want to read you can checkout here.

Outputs

As the name suggests, outputs in Kestra are use to pass values from one task or flow to another. There are various methods to pass outputs from one task or flow to another for different situations or usecases.

For example you can to fetch some data from the database and want to process that data in python. In this scenario you will make two tasks: one for fetching the data’s from the database and other for processing the data in python. But before processing the data, you have to pass the fetched data to the processing task, for that you will use outputs in kestra.

Below is a very simple example of outputs:

id: flow-with-outputs
namespace: ronak.blog

inputs:
  - id: api_url
    type: STRING
    defaults: https://example.com/

tasks:
  - id: fetch-data
    type: io.kestra.plugin.core.http.Request
    uri: "{{ inputs.api_url }}"

  - id: log-fetched-data
    type: io.kestra.plugin.core.log.Log
    message: "Fetch data body: {{outputs.fetch-data.body}}"

In the above YAML file, there are two tasks: fetch-data and log-fetched-data. And we are accessing the outputs of fetch-data by the following syntax:

outputs.[task_id].[output_value]

Note: Other task types outputs can be pass in different ways but the syntax for accessing it will be the same.

Triggers

Trigger’s are one of the great feature of Kestra (My favorite ❤️). The trigger’s are use to trigger a flow in Kestra on the basis of some events. Suppose you wants to trigger a flow when some image is uploaded to your AWS S3 bucket for processing it and then saving to S3. In this case you can use trigger to make you flow.

There are various kinds of triggers available in Kestra. And those are:

• Schedule Trigger: This kind of trigger is use to schedule your flow for execution at certain interval of time using cron jobs.

• Webhook Trigger: This kind of trigger is use to execute a flow on the basis of API requests from other sites or platform. (Suppose running a flow when a user clicks on a button on your site’s frontend)

• Polling Trigger: This kind of trigger polls a external system for presence of data and on the basis of that it executes a flow.

• Plugin based Triggers: Some plugin’s also has its own special kinds of trigger like S3’s trigger and others.

• Flow Trigger: This kind of trigger are use to execute a flow when another flow finishes its execution.

• Realtime Tigger: This kind of trigger can be use when we need realtime behaviour in flow execution.

Overall, each trigger has its own uniqueness and usecases.

Below is an example of a simple Schedule Trigger:

id: flow_with_triggers
namespace: ronak.blog
tasks:
  - id: log_task
    type: io.kestra.plugin.core.log.Log
    message: This is my first trigger flow

triggers:
  - id: schedule_trigger
    type: io.kestra.plugin.core.trigger.Schedule
    cron: 0 8 * * * # Everyday 8 AM

In the above YAML file, the flow will execute everyday 8 AM.

Error and Retries

Error and Retries are also a imporant feature in Kestra. We know that error are found to happen in any system. So Kestra provides a way to do some task on a error in the flow or namespace like sending a Email or Slack message on getting a error in the flow.

And also you can retry the execution of the flow on encountering with an error.

Below is a simple example of error handling flow:

id: flow_with_error
namespace: ronak.blog

tasks:
  - id: fail
    type: io.kestra.plugin.core.execution.Fail # for forced failure

errors:
  - id: alert_on_failure
    type: io.kestra.plugin.notifications.slack.SlackIncomingWebhook
    url: "{{ secret('SLACK_WEBHOOK') }}"
    payload: |
      {
        "channel": "#alerts",
        "text": "Failure alert for flow {{ flow.namespace }}.{{ flow.id }} with ID {{ execution.id }}"
      }

In the above YAML file, the flow will give an error and after that a slack message will be send to the given SLACK_WEBHOOK with the respective message.

And a simple example of retry flow:

id: flow_with_retry
namespace: ronak.blog

tasks:
  - id: api_request
    type: io.kestra.plugin.core.http.Request
    uri: https://example.com/products
    retry:
      type: constant # type: string
      interval: PT20S # type: Duration
      maxDuration: PT1H # type: Duration
      maxAttempt: 10 # type: int
      warningOnRetry: true # type: boolean, default is false

In the above YAML file, the flow will request at the given http endpoint and retry for every 20 seconds upto 1 hour and maximum of 10 attempts until the endpoint is hitted successfully.

Conclusion

So far I loved Kestra. And the thing that it is open source, exicites me more. In my future blogs I will be writing more on this tool from concept deep dive to actual project implementation. Till then Byy 👋

I hope you liked the blog. Let me know what do you think about Kestra.

So in this blog, I am going to give a step by step procedure to run postgreSQL and pgAdmin in the docker container. And in the next blog I will make a TODO app using postgreSQL.

Prerequisites

There is only one prerequisite to setup postgreSQL on your local machine.

• Basic Docker commands

Before proceeding, you should have Docker installed on your system.

PostgreSQL & pgAdmin

Well before going into the steps to run postgreSQL, let's first understand what is postgreSQL.

PostgreSQL is an advanced, open-source, enterprise-level relational database that supports both SQL (relational) and JSON (non-relational) querying.

On the other hand, pgAdmin is an open source management tool for postgreSQL. It provides an powerful graphical interface that simplifies the creation, maintenance, and use of the database objects. You can write SQL queries directly from the query tool provided by pgAdmin.

So basically, PostgreSQL is the main database and pgAdmin is for managing your PostgreSQL databases.

PostgreSQL setup

Pulling docker images

Now let's setup our postgreSQL database using Docker.

So, first of all, we have to pull the images of the postgreSQL and pgAdmin from the docker registry using the below commands.

docker pull postgres

The above command will pull the postgreSQL database image from docker registry.

docker pull dpage/pgadmin4

The above command will pull the pgAdmin4 image from docker registry.

To see all the pulled docker images. You can run the below command:

docker images

Spinning up the docker containers

Since we successfully pulled the two docker images, now we can move to the next step.

In this step, we will start the postgreSQL database and pgAdmin in the docker containers and also map the host port to the container port so that we can communicate to the container from our machine.

Now run the below command to start the postgreSQL database container. After running the command, you will see bunch of lines printed on the terminal and it is running.

docker run -p 5432:5432 -e POSTGRES_PASSWORD='YOUR-PASSWORD' postgres

Here is the breakdown of the above command :

Now open a different tab in the terminal and also run the below command to start the pgAdmin container in that tab. Here also you will see bunch of lines printed on the terminal and it is running.

docker run -p 8080:80  -e PGADMIN_DEFAULT_EMAIL='YOUR-EMAIL' -e PGADMIN_DEFAULT_PASSWORD='YOUR-pgAdmin-PASSWORD' dpage/pgadmin4

This command's breakdown is also same as above, just it has two environment variables.

Wow!!! Your database and pgAdmin containers are now up and running.

To list out which containers are running, you can open up another tab in the terminal and run the below command.

docker ps

And to stop a container, you can run the below command.

docker stop <CONTAINER-ID>

Connect postgreSQL to pgAdmin

Go to any browser on your desktop/laptop and open http://localhost:8080 . This will open up the pgAdmin4 on the web.

You will see the below login page of pgAdmin4. Just fill out the login page with the Email and Password which you have given while starting the pgAdmin container.

Now if the login credentials are correct then you will see a page like below.

Now click on the Add New Server button inside the quick links section. Then a dialog box will open up like below, which will ask you to setup the database server name and other credentials of the postgreSQL database.

Now give a name to the server. For now I am giving the name as todo. Then go to the connection section of the dialog box, there you will see bunch of fields like below.

Here you have to fill three input fields.

• Host name/address: In this field you have to give the host name i.e. my machine name. For example:

  

• Username: By default, the username is postgres.

• Password: Give the password which you have given while starting the postgres container.

Now click the save button and if everything is correct then it will create a server for you and below page will be displayed otherwise an error message will be shown.

Now you can see, In the left size there is all the options. For writing queries in the database, you can simply right click on the postgres option under the Databases and then select the query tool option. Then a new query page will open up like below.

Now you can simply run queries over here and click on the run button to see the output.

Congratulations 🥳 !!! You successfully setup postgreSQL database and pgAdmin using Docker.

In the next blog, I will make an TODO web application using postgreSQL as the database.

Stay tuned for more blogs like this and subscribe to my newsletter.

Bye 👋

I am pretty sure that after reading this blog, you will understand almost everything about Server Driven User interfaces. Also, I am going to give you a demo by making a small SDUI project. So stay with me till the end of this blog. Let's get started.

Then vs Now

Well, before going into SDUI, let's understand how things happened in the past and how things are happening now. So, in the past, there were only websites and no mobile applications. ( In 1990's )

We know how websites work. It is like when a client opens up a webpage, a request is sent to the server so that the server can give a response with the required files (HTML, CSS, and JavaScript files) that are needed to display our website. It is happening on the web.

But for mobile apps, the codes are hard coded on the application side.

In the present time, we are using both technologies.

What is SDUI ?

SDUI (Server Driven User Interface) is a method of rendering the front-end or user interface of mobile applications from the server without hard coding it on the application side. It is like instructing the application to display certain widgets or elements at certain places by the server.

The server sends the information about the elements (like their width, height, color, position, etc) in simple JSON format, and the application converts that data into the respective application stack's code. That means if it is react-native then the JSON data will be converted into react-native code by some pre-written functions or converter.

What problem it is solving ?

Well, as I stated above how things happened in the past and how things are happening now. We can see that the main problem at present is that the mobile application code is hard-coded on the client side. So if a developer wants to release a new version of the app, they have to push the new app to the Play Store or App Store. After that, a user will have to go to the Play Store or App Store to update the app then only they can see the changes in the app. That means in this case, nothing is spontaneous. It is the reason why some use an old version of the app, and some use a new version of the app. And this is where inconsistency is created.

There are also apps where you have to display the changes spontaneously without the need to update the app on the Play Store or App Store (like Amazon, Flipkart, etc). We know that Amazon , Flipkart frequently changes the UI and banners of the app depending on many factors, and you can see the changes spontaneously without the requirements of updating the app.

And in some other cases, as a developer you have to experiment app's features to a group of user but not all, so that you can figure out is that the feature is worth or not.

So how does that work?

In this kind of application, the whole app is not hard-coded on the client end. These apps, use the concepts of SDUI (Server Driven User Interface), which means the server instructs the application on how and where to display the UI components. So it is like our web technology, which takes the files from the server to display to the end-user or client.

That's what SDUI is trying to solve. It wants the mobile applications UI to be server-driven so that they can be updated frequently.

How SDUI works?

Now the main question is how SDUI actually works. To be honest, it is quite simple. If you have knowledge of web development and APIs, then it would be a very familiar kind of thing for you. But even if you don't know anything then also I will make you understand.

We know that on the web, when a user goes to any website URL, the browser sends a request to the server and the server sends back the HTML, CSS, and Javascript files in response. The browser then displays the webpage to the user.

So same concept also applies to SDUI. We know that SDUI is for mobile applications and when a user opens up an application on their mobile phone, a request is sent to the server and the server sends back JSON data in response. Which in turn is converted into application code by some converter. Thus, UI is sent in the form of JSON from the server and that's it. That's how SDUI works. Isn't it easy?

Drawbacks

There are some drawbacks of SDUI and those are listed below :

• For a SDUI based application you always gonna need an internet connection.

• There are chances of single point of failure since the UI is dependent on the server.

• It may reduces the performance of the application.

Now how to deal with this drawbacks?

Basically, the answer is quite simple. The fact is you wouldn't be using the SDUI for your whole application. Using SDUI in some parts of the application is helpful where you require constant changes, like the banners for sale in E-commerce apps, the info section of many apps, and more.

Conclusion

Lastly, I would say that SDUI is quite a good approach for the apps where continuous changes are required but you should not make full app SDUI based because it has many drawbacks. The approach is quite simple but effective.

Thank you reading the blog. 🙌

There is no such prerequisite for this blog, you just have to know a basic knowledge of functions and that's it.

What is React.js ?

Well, React.js is a Javascript library developed by Meta ( formerly Facebook Inc.) and released in 2013. It provides a component based development i.e. every section like header, footer, cards are different components in React.js. It reduces the lines of code by reusability of codes using components.

In the below sections I will explain different concepts of React.js like components and JSX .

What makes it powerful ?

One of the important feature of React which makes the React so powerful and popular is its component based development because it enforces code reusability thus reducing the lines of code for development. And the most important part is that it is not even a new thing, under the hood it is using HTML, CSS and Javascript only. And I will also gonna tell you how react is actually working. So that means you have to know HTML, CSS & Javascript to get started with react. (But just the base level understanding is enough).

Components & JSX

Components: Components are the individual parts of a website which on combining makes the whole website. For example suppose you have a header component, hero section component, card component, and a footer component. And if you combine the components then you will get to see the whole webpage consisting of these components.
Components enforces code reusability because you can use the same component in many different places or webpages.

In the above diagram, we used 4 different components in the page. Each component has its independent code and the card component is used multiple times in the same page. That's how it works. 🤷

React just break the whole website in simple components, which we can use in any of our page.

JSX: JSX is very important feature by which react was made. JSX means the combination of Javascript and HTML in a single file. That means you can use HTML in Javascript and vice versa. For example:

// JSX example
const Header = () => { // javascript code
    return (
        <div> <!-- HTML code -->
            <p>This is a header</p>
        </div>
    );
}

How it works?

If you talk about the underlying principle of react then it is like a Javascript function returning some HTML by using JSX. So whenever that particular function calls, it just returns HTML. That's it. And particularly that function is called a functional component.

At first let's create a normal function, which is returning some string.

// It is the ES6 way of writing fuctions
const sampleFunction = () => {
       return "It is a sample function";
}

console.log(sampleFuction());

// Output : It is a sample function

So, if you are already familiar with functions then you will know that it is just a simple function which is returning a simple string.

And when we talk about react's functional component then it is also a simple function which is just returning some kind of HTML codes. For example:

const MainSection = () => {
    return (
        <p>It is a main section </p>
    );
}

export default MainSection; // exporting the function

And for calling the above function, we use tags kind of structure and we also have to export it and import it in another file to use. Like below:

import MainSection from "./MainSection"; // importing it

const App = () => {
    return (
        <div>
            <MainSection />  <!-- Calling the function -->
        </div>
    );
}

And it will be treated like below:

import MainSection from "./MainSection";

const App = () => {
    return (
        <div>
            <!-- Below is the returned html code -->
            <p>It is a main section </p> 
        </div>
    );
}

Now let's see a diagram of many components and using it in one file.

In the above diagram, we have 3 components and we have the html returning from those components. So we use the components in single file and it returned the html's from all the components in that single file. and that's how it works. 🤷

App Development

Everyone wants to know how to develop Android or IOS apps 📱. But if I tell you, you can develop both Android & IOS apps by react and here comes react-native, a cross-platform app development tool. It is like flutter with one most powerful advantage and that is you can learn react-native very fastly if you already know react. Basically I learned react-native in just 1 day since I already knew react.

And another cool thing about react-native is that you don't need a high spec laptop to get started. You can use any mid-range laptop for it. Basically I am personally doing react-native on my very low powered laptop. (Like one of the slowest laptop I ever seen 😂)

My Experiance

Let's get into my story 🫥. So from the beginning of my development journey I was using HTML, CSS and Javascript. And I became very comfortable with this three things that I made many games, websites, animations with this. But one day I decided to learn React.js and I started reading docs about React.js and after couple of days I learned the fundamentals of React.js and from that point I just fall in love with it ❤️. And I still remember I once made a movie website which has lots of repetitive codes and after learning react I just laughed at myself saying "why I didn't learn react before". So I highly recommend to have a look on React.js.

So lastly I just have to say one thing and that is just learn it. And if you learn React.js then you also can start to learn Next.js on top of it. And you may know that Next.js is becoming very popular nowadays.

And I will be writing more blogs on React.js in depth in my future blogs. So stay tuned for that and subscribe to my newsletter for more updates.✌️
Thank you for reading the blog. Have a great day.🙌

Before going to tell about my experiences let's talk about what is AWS and an AWS Community Day. And if you already know it then you can freely skip this section.

What is AWS?

AWS (Amazon Web Services) is an IaaS (Infrastructure as a Service) platform that gives its infrastructure to the user to use on a pay-as-you-go plan basis. AWS provides various services to be utilized by many developers, founders and entrepreneurs. Through AWS you don't have to buy a real server, you just have to pay for the amount of resources you use. It the most successful and popular cloud provider around the world for so many decades. 🌎

What is AWS Community Day?

AWS Community Day is an event organised by AWS community builders around the globe to give knowledge of AWS, its various services and certification knowledge. In this event, many tech leaders, industry experts, developers, and students come and join. Through this event, we connect with like-minded people and share knowledge.

This event was also an AWS Community Day Event organized in Jaipur.

Now I will talk about my experiences and learning from the event.

My Experience and learnings

As this was the first event ever that I attended the feel and experience were awesome like at the top level. When I entered the event I got relief since I was travelling for 3 hours. ⏰

After entering through the gate I saw so many students already there waiting for the event to start and then my excitement reached its peak level. 💯

Then after a while community members started to distribute the entry cards and bands.

And then we took our seats and waited for the event to start.

Then finally the event started with lamp lighting by Mrs Bhuvaneswari Subramani (a true luminary in Tech, AWS Devtools Hero, and Chief Cloud Evangelist, at Intuitive Cloud). Honestly, the lamp lighting reminded me of my school days. 🏫

Then the event started with a talk by Mrs Bhuvaneswari Subramani. She talked about her 24 years of experience in this field. She talked about her journey to become an AWS Devtools Hero and more. The talk was very inspirational and motivating.

Then there was a very exciting talk by Mr Abhishek Gupta on a very interesting and currently booming topic, which is Generative AI. Of course, it is one of my favourite things I mean who doesn't like Gen-AI? He explains how one can use AWS Bedrock to implement Gen-AI capabilities into their project with just a few lines of code. Isn't it amazing? He also showed some live demos by generating some texts through AWS Bedrock and some by generating images.

After this exciting session, there was a very important talk by Mrs Disha Babla on the topic of various AWS certification exams. She talks about how one can prepare for the certification exam. She also mentioned the AWS skill builder website from where one can prepare for the exams. Btw I am already learning from AWS Skill Builder and it is quite good. The things that mam talks about are very informative and crucial for everyone.

Then there was a talk by Mr Jones Zachariah Noel N on the topic of serverless with AWS. He explained all the concepts of serverless with AWS lambda and there was another technology that he talked about, which I forgot 🙁. But the talk was amazing. 🔥

Then there was a lunch after that we again went to the auditorium and the event resumed after some time.

💡

Check out the foods and swags section to know what was in the lunch. 🤤 🥗

After lunch, there was a talk by Mr Amit Kumar on the topic of CI/CD (Continuous Integration and Continuous Deployment) at Scale. I liked the talk of this person. The way he spoke and the personality of him was just incredible. He explained how continuous integration and continuous deployment can help you to better maintain software products. He explained in a great way what continuous integration and continuous deployment are. I enjoyed and learned lots of things from this talk.

Then there was a talk by Mr Dheeraj Choudhary on the topic of AWS CodeWhisperer. He explains everything about Code Whisperer, which is a code companion to help you write your code in a 57% faster way and an industry-standard way. He explains how AWS CodeWhisperer can help you write your code in an IDE to make your development faster. He also showed a live demo on this very exciting topic and surely I will be adapting this code companion thing in my daily coding life.

After this wonderful talk, there was a talk by Mr Ashish Tiwari on the topic of AWS Elastic Search. This talk just reveals how actually search engines understand the meaning of our search even if I type something wrong. He explains how one can integrate this feature with their search engines by using AWS Elastic Search. He also showed some demos by comparing a normal search engine and a search engine powered by Elastic Search. 🔎

Then finally there was a Panel Discussion between the community leaders and other developers, where Aditya Soni was the judge and other panel members were Seema Saharan, Abhineet Saxena, Sachin Sharma, Ritu Soni, Gargee Bhatnagar. The panel discussion was just fun and awesome. Learned a lot of things from there. Everyone answers certain important questions like "Is DSA still needed after getting a job?", "How to became AWS ambassador" etc. Overall I loved the panel discussion and also liked the jokes about "Bhupendra Jogi" and "Bangan" 🍆 by Abhineet Saxena sir. 😂

Then there was a talk by Mr Nitin Sharma on the topic of Security patterns with AWS IAM. It was also a great talk. I learned about how one can get into your AWS account without your consent and how to prevent that. 🧑🏽‍💻

And at the last, there were extra swag giveaways for social media contests, meme contests and others. Also the speakers and teach leaders are felicitated in Rajasthani style. Then there was a cutting of the cake. 🥮

And then we took some group photos, which I didn't get till now. 😕

So overall my experience with this event was great. I learned lots of things from this event. The community leaders and speakers are very motivating. I am just waiting for the next event to come so that I can join the event.😁

Networking

Through the event, I networked with many other folks who are also enthusiastic about the cloud and curious about new software engineering technologies that are coming up.

Being an introvert I talk less with people but this time I talked a lot. Maybe because I have some like-minded people around me. Whatever the reason I liked it very much. I think through this I can improve my communication skills and connect with more like-minded people.

Foods and Swags

Foods foods foods !!!!! we all love it. Right? At this event, we got some delicious food. First of all, we got some breakfast with Poha, Bhujia, Samosa and Coffee.

For lunch, we got Salad, Papar, Panner, fried rice, Naan, Roti, Mix Veg, Dal, Gulab Jamun and Ice Cream. The pictures of the food are here:

Now if you are curious about the swag then it was like I got an AWS t-shirt 👕, got two premium GitHub stickers, and some other stickers as well.

Here is the snapshot of the swags 👕 that I got:

And lastly, we got a Red Bull because we all know that Red Bull gives us wings. 🪽

Conclusion

In a nutshell, the event was super amazing. This was one of my best experiences ever. Thank you AWS User Group Jaipur for organizing this amazing event and giving us so much love and knowledge. Looking forward to more exciting events like this.

Thank you for reading the blog. See you next time. Bye 👋

In this blog, we delve into the fascinating world of libraries and frameworks. We aim to demystify these concepts, explore their unique characteristics, and help you discern when to employ one over the other. Whether you're an experienced coder or a curious beginner, understanding the differences between libraries and frameworks is essential for making informed decisions during the software development journey.

What Are Libraries and Frameworks?

Libraries

Libraries are like a collection of pre-written functions and routines that are designed to perform specific tasks or solve particular problems. They provide a set of tools and utilities that can be called upon in your code when needed. Think of libraries as a toolbox where you can pick the right tool for a specific job. For example, in the JavaScript world, jQuery is a well-known library that simplifies DOM manipulation and event handling. Developers can include jQuery in their projects to make these common tasks easier.

You can also make your library very easily just by creating some pre-written functions and using those in your program.

Now let's build a simple library using JavaScript. It would be very simple don't need to worry.

// Filename ---> sum.js
// A simple arrow function to add two numbers
const sum2 = (a , b) => {
    return (a+b);
}

// A simple arrow function to add three numbers
const sum3 = (a,b,c) => {
    return (a+b+c);
}

// Exporting two functions
export {sum2,sum3};

In the above code, we created two functions and exported them so that they can be used by other files. Now in another file, we can import this file which is named sum.js. And assume that they are in the same folder.

import {sum2, sum3} from "./sum.js";

console.log(sum2(1,2)) // Output ---> 3

console.log(sum3(1,2,3)) // Output ---> 6

That's how a library works. Now let's talk about the frameworks.

Frameworks

Frameworks, on the other hand, go a step further. They are more like blueprints for your application. Instead of just offering individual tools, frameworks provide a complete structure for building an application. They dictate the overall architecture and flow of your code. In essence, when you use a framework, you are placing your code within a predefined structure or pattern. Frameworks are often opinionated about how you should organize your code and enforce a specific way of doing things. For example, Next.js is a framework for React.js which is in turn a library. So Next.js provides a structure for building React.js applications faster.

To understand the framework more in-depth let's get some concepts from the Next.js framework.

Next.js uses a specific file structure for building an application. If you already know react then you probably will know that react uses the react-router-dom package to make different routes for your application and it is a little bit long process.

But in next.js you don't have to install a different package for routing. You just have to keep a specific file structure to make a route. But you may think how can I make different routes by maintaining a specific file structure? Right?

So to give you the answer see the below diagram to understand how next.js knows a particular route by using a file structure.

So in the above diagram, next.js uses a specific folder named pages for routing. That means now categories and blogs are the two routes for the application. Thus it becomes very very simple to make routes in next.js for its file structure. That's what is the advantage of a framework over a simple library.

Key Characteristics of Libraries

Reusability

Libraries excel in reusability. You can use them in multiple projects, saving time and effort. Since libraries offer a wide range of functions, developers can choose the specific functionality they need, reducing code duplication and enhancing efficiency.

Freedom and Flexibility

Libraries offer more freedom and flexibility in terms of how and when you use them. You can include a library in your project and call its functions when you see fit. This flexibility allows developers to have full control over the application's architecture and flow.

Limited Control

When working with libraries, you have the liberty to structure your code as you see fit. Libraries typically don't impose a particular structure or pattern, allowing you to maintain a high level of control over your project's development.

Key Characteristics of Frameworks

Architectural Guidelines

Frameworks come with architectural guidelines. They prescribe a specific way to structure your application. This is often known as the "Inversion of Control" principle, where control over the flow of a program is shifted from the developer to the framework. Frameworks provide the skeleton, and developers flesh out the details.

Integrated Components

Frameworks include a set of integrated components and tools that are designed to work together seamlessly. This ensures that different parts of your application work harmoniously and reduces the effort required to integrate third-party components.

Less Control, More Conventions

Frameworks require developers to follow conventions and patterns established by the framework. While this might limit flexibility, it can also lead to more efficient development. With conventions in place, developers spend less time making decisions about code organization and can focus on implementing features.

When to Use Libraries and When to Use Frameworks

Choosing Libraries

• Libraries are a great choice when you need specific functionality and don't want to be locked into a framework's architectural decisions. For example, if you're working on a simple website and need some enhanced UI components, you might choose a library like Bootstrap for its ready-made UI elements.

Choosing Frameworks

• Frameworks are beneficial when you're building a complex application where consistent structure and established patterns are crucial. They are particularly useful for large-scale web applications or projects that require scalability and maintainability.

Hybrid Approaches

• In some cases, it makes sense to use both libraries and frameworks in a single project. For instance, you might use a framework like Angular for the overall structure of your web application while incorporating libraries like D3.js for data visualization components. This hybrid approach allows you to leverage the strengths of both.

Examples from the Real World

Let's get some knowledge of different libraries and frameworks in the real world.

Libraries

JQuery (Library): jQuery is a popular JavaScript library that simplifies DOM manipulation and event handling. Developers can choose to include jQuery in their web projects to make these common tasks more straightforward without affecting the overall structure of their application.

NumPy (Library): NumPy is a fundamental library for scientific computing in Python. It provides support for arrays and matrices, as well as a wide range of mathematical functions, making it an essential tool for data manipulation and analysis.

Firebase (Library): Firebase is a comprehensive set of libraries and tools for building web and mobile applications. It offers real-time database services, authentication, hosting, and more, simplifying the development of full-stack applications.

Pandas (Library): Pandas is a library for data manipulation and analysis in Python. It provides data structures and functions for working with structured data, making it an essential tool for data scientists and analysts.

Frameworks

Next.js (Framework): Next.js is a framework built on top of React, designed for server-rendered React applications. It provides a structured approach to building React applications with server-side rendering, routing, and many other features. Next.js enforces a clear project structure and development conventions, making it an ideal choice for building SEO-friendly web applications and websites.

Django (Framework): Django is a high-level Python web framework that encourages rapid development and clean, pragmatic design. It includes features like an ORM (Object-Relational Mapping), authentication, admin interface, and more, making it a comprehensive framework for building web applications. Django's "batteries-included" philosophy ensures a consistent structure for web development.

Angular (Framework): Angular is a full-fledged JavaScript framework developed and maintained by Google. It provides a comprehensive set of tools and components for building complex, enterprise-level web applications. Angular enforces a strong structure and uses TypeScript for static typing, making it a robust choice for large-scale projects.

Nuxt.js (Framework): Nuxt.js is a framework for building server-rendered Vue.js applications. It extends Vue.js to include features like server-side rendering, routing, and more. Nuxt.js provides a structured approach to Vue application development, helping developers create SEO-friendly web applications with ease.

Both

React (Library and Framework): React is a JavaScript library for building user interfaces. It's often considered a library because it primarily focuses on the view layer. However, it's powerful and flexible enough to be the foundation for entire applications, blurring the lines between library and framework. React provides a component-based approach to building UIs and is widely used in single-page applications (SPAs) and large-scale web projects.

Vue.js (Framework and Library): Vue.js is a progressive JavaScript framework that can be used as both a library and a full-featured framework. Vue focuses on the view layer but is flexible enough to be used as the core framework for building complete web applications. Vue's simplicity and ease of integration with other projects make it a popular choice for developers.

Express.js (Framework and Library): Express.js is a minimal and flexible Node.js web application framework that simplifies building web applications and APIs. While it's often called a framework, it's more akin to a library because it provides foundational tools for web development.

These are some of the real-world examples of different libraries and frameworks.

Summarize

• Libraries are like a collection of pre-written functions to solve a particular problem.

• Frameworks are the blueprints for an application. It defines a structure for an application.

• You can use libraries in multiple projects. It provides freedom and flexibility to structure your code.

• Frameworks lead to efficient development since they give a structure.

• Libraries are a great choice when you need specific functionality and want flexibility.

• Frameworks are beneficial when you're building a complex application where consistent structure is required.

That's it for this blog. I hope you understand the concept of Library and Framework. See you in the next blog.

But here's the catch: Git, with its incredible power and flexibility, can be a double-edged sword. Without a solid understanding of its basic commands, it's easy to feel lost in a sea of code changes, branches, and repositories. That's why, whether you're a seasoned developer or just starting your coding journey, mastering Git's essential commands is a non-negotiable skill.

In this blog, we're embarking on a journey through the fundamental Git commands that every developer, regardless of experience level, should have in their toolkit. Whether you're collaborating on a large-scale project, managing your codebase, or simply striving for greater coding efficiency, these commands will be your trusted companions.

Get ready to level up your version control game as we explore the basic Git commands that can make a world of difference in your development journey. Let's dive in! 💻🚀

Basic Git concepts

Before learning the basic git commands, we have to know some of the basic concepts of git to get started. Below is the list of basic git concepts which is required in day to day life of a programmer.

• Repository (Repo): A repository is a directory where Git stores all the files and history for a project. It can be local (on your computer) or remote (hosted on a server, like GitHub )

• Commit: A commit represents a snapshot of the project at a specific point in time. It includes changes to one or more files, along with a unique identifier (SHA-1 hash), a commit message explaining the changes, and a reference to the previous commit (parent commit) to create a history.

• Branch: A branch is a parallel line of development within a Git repository. It allows multiple contributors to work on different features or bug fixes simultaneously without interfering with each other. The default branch is usually called master or main. In the recent version of GitHub the default branch is always main, so it is good to make your branch main in your local repository.

  💡

  A particular branch is related to one pull request. So if you want to make another pull request for another feature then make another branch for that feature.

• Checkout: Checking out a branch means switching from one branch to another.

• Remote: A remote is a repository hosted on a different server. You can say that a remote repository is a repository that is not located on your local computer and is stored in GitHub. Developers can clone a remote repository to their local machine, collaborate on it, and push changes back to the remote.

• Clone: Cloning is the process of copying a remote repository to your local machine.

  It creates a local repository with the same commit history and files as the remote.

• Pull: Pulling is used to update your local repository with changes from a remote repository. It combines a fetch operation (retrieving changes from the remote) and a merge operation (combining those changes with your local branch).

• Push: Pushing is used to send your local commits to a remote repository.

  It updates the remote repository with your changes.

• Merge: Merging combines two or more branches (usually the current branch and another) into a single branch. It's used to integrate changes from one branch into another.

• Conflict: Conflicts occur when Git cannot automatically merge changes from two different branches or commits. Developers must manually resolve conflicts by choosing which changes to keep.

• Pull Request (PR): In some Git hosting platforms like GitHub, a pull request is a way to propose changes to a repository. Others can review the changes, discuss them, and then merge them into the main branch.

• Staging Area (Index): The staging area is where you prepare changes for a commit. You can selectively add specific changes to the staging area before committing them.

• .gitignore: This is a file that specifies which files or directories should be ignored by Git (not tracked). It's useful for excluding temporary files, build artifacts and sensitive information from version control.

Git Basic Commands

Now let's talk about the basic git commands and their use cases.

1.   git init
   

   The above command is used to initialize any local folder to a git repository i.e. from now you can see the log history of this folder and the changes that are going to be made in this particular folder.

2.   git clone <Repository-URL>
   

   The above command is used to clone or download any repository files from GitHub by using the repository URL. In the above command, you have to replace the <Repository-URL> to the URL of the repository which you want to clone.

3.   git status
   

   The above command is used to list the files in the present git folder. It will list the untracked files (i.e. newly created files), modified files, deleted files and more. It will only show the changes from the time when the folder is initialized as a git folder by git init command.

4.   git add <File-Name> 
     # It will add the specified file for commit
     git add .
     # It will add all the untracked and modified files for commit
   

   The above commands are used to add the files which will be committed soon. That means we are just selecting the files for a commit.

   The first command is used to add a specific file by the <File-Name> and the second command is used to add all the untracked and modified files (which are shown in the git status command ) for commit.

5.   git commit -m "Message for this commit"
   
     # or
   
     git commit -S -m "Message for this signed commit"
   

   The above command is used to commit the added files with a message. The -m flag is used to give a commit message. The -S flag is used to sign a commit.

   💡

   If you didn't read my previous blog on Git Security, where I explained all the concepts of signed commits and how to set security keys to sign a commit, then go to the below link and read the full blog: https://codago.hashnode.dev/enhancing-git-security

6.   git log
   

   The above command is used to display all the previous commits of that particular repository with various important information like commit message, commit ID, and the time when the commit was made. So, it is a very useful command.

7.   git stash
   

   The above command is used to put all the added files in a stash area. A stash area is a place where you prepare changes for a commit and can get those stashed files when required.

8.   git stash pop
   

   The above command is used to take out the files added to a stash area.

9.   git reset <Commit-ID>
   

   The above command is used to reset all the commits above the given commit ID. You can find the commit ID of a commit by using the git log command on your console. This command will undo the commits above the given commit ID.

10. git restore --staged <DeletedFileName>
    

    The above command is used to get back a deleted file or restore the state of a file to the previous state.

11. git remote add origin <Repository-URL>
    

    The above command is used to add a remote URL named origin. This command is very useful because without this command you can't connect your project repository URL to your git client. The repository URL can be found in the GitHub repository of the project.

12. git push origin <branch-name>
    
    #or
    
    git push origin <branch-name> -f
    

    The above commands are used to push the commits to the remote URL (origin) from your git client. This command will push the new commits to the GitHub repository of the project. The -f flag is used to forcefully push the commit history to the remote URL (origin).

    💡

    It is not recommended to use the -f flag because it can break your commit history. But sometimes it may be necessary to forcefully do certain things.

13. git branch <new-branch-name>
    

    The above command is used to make a new branch whose name is given in <new-branch-name>.

14. git checkout <branch-name>
    

    The above command is used to checkout from the current branch to the specified branch.

15. git pull origin <branch-name>
    

    The above command is used to update your local repository with changes from a remote repository. In this case, we are pulling from the origin remote repository and from the specified branch.

So this is it for this blog. If you find the blog useful then share it with your friends so that they also can benefit from this blog. And if you have any suggestions for a blog topic then feel free to comment down below.

And if you didn't see my previous blogs on Git then just check those out. Happy Coding ✌

previous blogs:

Git and GitHub Introduction: https://codago.hashnode.dev/git-and-github-introduction

Enhancing Git Security: https://codago.hashnode.dev/enhancing-git-security

Imagine this scenario: You're working on a mission-critical project, and the codebase is constantly evolving with contributions from various team members. How can you be sure that the commits in your repository haven't been tampered with? How do you verify that those commits were indeed made by the collaborators they claim to be from? This is where Git commit signing comes into play.

In this comprehensive guide, we will delve into the world of Git commit signing, exploring its significance, how it works, and why it's a best practice that every developer should embrace. Whether you're a seasoned Git user or just getting started, understanding commit signing is a fundamental skill that can bolster the security of your code and the reliability of your development workflow.

Join us on this journey as we uncover the secrets of Git commit signing and empower you to take your Git repositories to the next level of security and trustworthiness. Let's get started!

Signing commits

Signing Git commits is an important security measure to verify the authenticity and integrity of commits in a Git repository. Suppose you are working on a project and you making some changes in the codebase, how a third person can be sure that the changes are done by you and not by anyone else? That's why we use the signing of commits to be sure that the contributor is authenticated.

When we sign a Git commit, we use our GPG (GNU Privacy Guard) key to create a cryptographic signature for the commit. This signature can then be verified by others to ensure that the commit was made by me and hasn't been tampered with.

Requirement and Benefits

1. Authentication: Signing commits proves that they were made by you and not by someone else pretending to be you. It adds an extra layer of trust to the commit history.

2. Integrity: The cryptographic signature ensures that the commit has not been altered since it was signed. If someone tries to modify a signed commit, the signature verification will fail.

3. Non-repudiation: Once a commit is signed, you cannot deny that you made that commit. This is particularly important in open-source projects or collaborative work where accountability matters.

4. Trust in the commit history: Trust in the Git commit history is crucial, especially in large and collaborative projects. Signed commits make it more difficult for malicious actors to inject malicious code into the repository unnoticed.

Vigilant mode

When we commit in git we sign the commit so that everyone can trust that commit and be confident about the author of the commit. So by enabling vigilant mode, you mark your git commits with one of three verification statutes i.e. someone made a signed commit then in GitHub, the commit will be shown as verified but if it is not verified then the commit will be shown as unverified. And if the vigilant mode is disabled then we can't see that kind of status in our git commits. So it is preferred to enable vigilant mode.

Various verification status

The following are the three verification statuses in GitHub:

1. Verified: The commit is signed, the signature was successfully verified, and the committer is the only author who has enabled vigilant mode.

2. Partially Verified: The commit is signed, and the signature was successfully verified, but the commit has an author who: a) is not the committer and b) has enabled vigilant mode. In this case, the commit signature doesn't guarantee the consent of the author, so the commit is only partially verified.

3. Unverified: Any of the following is true:

   • The commit is signed but the signature could not be verified.

   • The commit is not signed and the committer has enabled vigilant mode.

   • The commit is not signed and the author has enabled vigilant mode.

Enable vigilant mode

The steps to enable vigilant mode are:

1. In the upper-right corner of any page, click your profile photo, then click Settings.

2. In the "Access" section of the sidebar, click SSH and GPG keys.

3. Under "Vigilant mode," select Flag unsigned commits as unverified.

Make your commits signed

To make your commits signed you have to follow the below steps. Basically for signing commits, you require a GPG key or SSH key and a verified email address that is connected to your GitHub account. In this blog, I am only focusing on the GPG key because it is widely used and GitHub itself also recommends it.

Verify your email address

Verification of email address is very necessary because without verifying an email address you can't do anything in GitHub, to be honest. So the steps to verify your email address in GitHub are as follows:

1. Create a GitHub account.

2. In the upper-right corner of any page, click your profile photo, then click Settings.

3. In the "Access" section of the sidebar, click Emails.

4. Under your email address, click Resend verification email.

5. GitHub will send you an email with a link in it. After you click that link, you'll be taken to your GitHub dashboard and see a confirmation banner.

Generate a GPG key

1. Download and install the GPG command line tools for your operating system. We generally recommend installing the latest version for your operating system.

2. Open Git Bash.

3. Now we have to generate a GPG Key by executing the below command in Git Bash:

    gpg --full-generate-key
   

4. At the prompt, specify the kind of key you want, or press Enter to accept the default.

5. At the prompt, specify the key size you want, or press Enter to accept the default.

6. Enter the length of time the key should be valid. Press Enter to specify the default selection, indicating that the key doesn't expire. Unless you require an expiration date, we recommend accepting this default.

7. Verify that your selections are correct.

8. Enter your user ID information.

9. Type a secure passphrase.

10. Use the below command to list the long form of the GPG keys for which you have both a public and private key. A private key is required for signing commits or tags.

    gpg --list-secret-keys --keyid-format=long
    

11. From the list of GPG keys, copy the long form of the GPG key ID you'd like to use. In this example, the GPG key ID is 4AB5C36371587BD2:

    $ gpg --list-secret-keys --keyid-format=long
    /Users/codago/.gnupg/secring.gpg
    ------------------------------------
    sec   4096R/4AB5C36371587BD2 2023-03-10 [expires: 2024-03-10]
    uid                          Codago <codago@example.com>
    ssb   4096R/5BB6D45482678BE3 2023-03-10
    

12. Paste the text below, substituting the GPG key ID you'd like to use, this will print the GPG key ID, in ASCII armor format. In this example, the GPG key ID is 4AB5C36371587BD2:

    gpg --armor --export 4AB5C36371587BD2
    

13. Copy your GPG key, which is inside of -----BEGIN PGP PUBLIC KEY BLOCK----- and ending with -----END PGP PUBLIC KEY BLOCK-----.

14. Now go to the next section of this blog which is Adding a GPG key to your GitHub account.

Adding a GPG key

You generated your GPG key from the previous steps and now the final step is to add your GPG key to your GitHub account. You can add multiple keys to your GitHub account and sign the commits with any keys you want but if you delete a key then the commits you made with that key will be displayed as unverified. But if the GPG key expires then your commits still show the verified status stating that your GPG key is expired nothing else.

Now to add the GPG key we have created follow the below steps:

1. In the upper-right corner of any page, click your profile photo, then click Settings.

2. In the "Access" section of the sidebar, click SSH and GPG keys.

3. Next to the "GPG keys" header, click New GPG key.

4. In the "Title" field, type a name for your GPG key.

5. In the "Key" field, paste the GPG key we just created in the Generate a GPG key section.

6. Click the Add GPG key.

7. To confirm the action, authenticate to your GitHub account.

Sign commits from shell

You set up all the required steps to sign a commit, now you have to know how to sign a commit. To sign a commit you need the following command:

git commit -S -m "Commit message"

Alternatively, you can set the default config of gpgsign to true so that you don't have to specify the flag -S every time you sign a commit. To set the default config of gpgsign to true execute the following command:

git config commit.gpgsign true

So today you learned about signing git commits, the benefits of git commits, how to generate a gpg key and add it to GitHub, how to verify your email and lastly how to sign git commit in the command line.

If you liked the blog then give a ❤ and leave a comment below. Happy coding 🤜

What is Git?

Git is a distributed version control system (DVCS) that was created by Linus Torvalds in 2005. It's designed to help developers manage and track changes to their codebase efficiently. With Git, multiple developers can collaborate on a project without the risk of overwriting each other's work or losing track of changes. For example, you wrote a code and after that, you made some changes to the code and you saved your work but the next day you saw that the changes that you made broke the whole application and you need a way to go back to your previous code for those cases Git is very useful because it keeps track of your work and you can go back to your previous work if necessary and you can also see where and in which line you made those changes.

What is GitHub?

GitHub is a web-based platform and service that provides a wide range of tools and features for software developers and teams to collaborate, manage, and host their code repositories. It is one of the most popular and widely used platforms for version control and collaborative software development.

If you are working on a project and that project is on your local machine but if you want to share all the code history and project files on the internet so that everyone can see your code and also they can collaborate and make changes to your code that would be great right? So to do this GitHub comes into the picture where you can put your project files and the history of the project in GitHub. In summary, GitHub is a platform that combines the power of Git for version control with a suite of collaborative and project management features. It is widely used by individual developers, teams, and open-source communities to host, collaborate on, and manage software projects.

Key Concepts of Git

• Repository: A Git repository, or repo for short, is a directory that contains all the files and folders for a particular project, along with the entire history of changes made to those files.

• Commit: A commit is like a snapshot of your project at a specific point in time. It records the changes you've made to the files in your repo. Each commit has a unique identifier (a long string of letters and numbers) and a commit message that describes the changes made.

• Branch: A branch is a separate line of development within a Git repo. Developers can create branches to work on new features or fix bugs without affecting the main codebase. Once the changes are complete and tested, they can be merged back into the main branch.

• Merge: Merging is the process of combining the changes from one branch into another. This is often used to integrate completed features or bug fixes back into the main branch (usually called "master" or "main").

Benefits of Using Git

1. Version Control: Git allows you to track changes to your code over time, making it easy to roll back to previous versions if needed.

2. Collaboration: Multiple developers can work on the same project simultaneously, resolving conflicts efficiently.

3. Branching: Creating branches for new features or bug fixes keeps the main codebase stable.

4. Remote Hosting: Platforms like GitHub provide remote hosting for your Git repositories, making it easy to share your code and collaborate with others.

5. Open Source: Git is open source and widely adopted, with a vast community and plenty of resources for learning and troubleshooting.

Installation of Git & GitHub

For the installation of Git, go to the official website of Git which is given below and install the Git on your local machine.

Install Git Here

After installing Git, you should create your GitHub profile. Go to the GitHub website from below:

GitHub

After installation of Git and creating your GitHub account you should follow the below steps to setup your Git on your local machine :

1. The first thing you should do is to set your username and email which you have given in your GitHub account by using the below commands:

    git config --global user.name "YOUR_USER_NAME"
   

    git config --global user.email YOUR_EMAIL_ADDRESS
   

2. By default, Git uses the default branch named master when you initialize a git repository by using git init command but in the latest version of GitHub the default branch is the main branch. So we have to set the default branch to the main branch in Git. To do so use the below command:

    git config --global init.defaultBranch main
   

3. Now if you want to check your git configuration settings, you can do so by the below command:

    git config --list
   

That's it for this blog. In the next blog I will list and explain all the important git commands and their uses. Follow for more blogs like this and subscribe to my newsletter. Happy coding. ✌

Introduction

The internet has evolved significantly since its inception, transforming the way we communicate, conduct business, and access information. With each iteration, the web has become more interactive and interconnected. Now, we stand on the brink of a new era known as Web 3.0, promising to revolutionize the internet landscape once again. In this blog, we will delve into the concept of Web 3.0, exploring its key features, potential applications, and the impact it could have on various industries.

What is Web 3.0?

Web 3.0, often referred to as the decentralized web or the semantic web, represents a paradigm shift in the way we perceive and interact with the internet. Unlike its predecessor, Web 2.0, which primarily focused on user-generated content and social media, Web 3.0 aims to create a more intelligent, secure, and decentralized web ecosystem. It leverages emerging technologies such as blockchain, artificial intelligence, the Internet of Things (IoT), and decentralized networks to enhance user experiences and empower individuals in unprecedented ways.

Key Features of Web 3.0:

1. Decentralization: One of the defining features of Web 3.0 is decentralization, where power and control are distributed among participants rather than centralized authorities. Blockchain technology plays a crucial role in enabling decentralized applications (dApps), smart contracts, and secure peer-to-peer transactions.

2. Enhanced Interoperability: Web 3.0 focuses on enabling seamless interoperability between different platforms, systems, and applications. This allows for the exchange of data and services across various domains, creating a more connected and cohesive digital environment.

3. Artificial Intelligence and Machine Learning: Web 3.0 harnesses the power of AI and machine learning algorithms to extract meaning from vast amounts of unstructured data. This enables personalized experiences, predictive analytics, and smarter decision-making.

4. Semantic Web: Web 3.0 emphasizes the semantic web, which aims to make data more meaningful and understandable to machines. By assigning metadata and context to information, machines can interpret and process data more efficiently, leading to better search results and automated services.

Potential Applications of Web 3.0:

1. Finance and Cryptocurrencies: Web 3.0 has the potential to disrupt the traditional financial sector by enabling decentralized finance (DeFi) applications, tokenization of assets, and secure peer-to-peer transactions without intermediaries.

2. Internet of Things (IoT): Web 3.0 can facilitate a more interconnected IoT ecosystem, where devices communicate directly with each other, autonomously execute tasks, and share data securely.

3. Healthcare: Web 3.0 can revolutionize healthcare by enabling secure and interoperable electronic health records, facilitating medical research collaboration, and empowering patients to have more control over their health data.

4. Supply Chain Management: By leveraging blockchain technology, Web 3.0 can enhance transparency and traceability in supply chains, reducing fraud, counterfeiting, and inefficiencies.

5. Content Creation and Intellectual Property: Web 3.0 can provide content creators with improved copyright protection, direct monetization opportunities, and decentralized platforms that empower artists, writers, and musicians.

Decentralization

Decentralization refers to the distribution of power, authority, and decision-making across a network or system, rather than concentrating it in a central authority or entity. In a decentralized system, multiple participants have control and influence over the network, ensuring that no single entity holds complete control or can manipulate the system for its benefit.

Decentralization is often associated with emerging technologies like blockchain, which allows for the creation of decentralized applications (dApps) and peer-to-peer transactions without the need for intermediaries. Blockchain achieves decentralization by maintaining a distributed ledger that is verified and updated by a network of computers (nodes) instead of a central authority.

The benefits of decentralization are numerous. It fosters transparency, as the shared ledger in a decentralized system is accessible to all participants, reducing the potential for fraud and manipulation. It also enhances security since data is stored across multiple nodes, making it more resistant to hacking or data loss. Decentralization promotes censorship resistance, as it becomes harder for any single entity to control or shut down the system. Furthermore, decentralization empowers individuals by giving them direct control over their data, digital assets, and transactions.

Overall, decentralization represents a shift towards more democratic, transparent, and user-centric systems, offering the potential to disrupt traditional industries and empower individuals in ways not previously possible.

dApps

DApps, short for decentralized applications, are software applications that run on a decentralized network rather than a centralized server. They leverage blockchain technology and smart contracts to enable direct peer-to-peer interactions, removing the need for intermediaries and providing a more transparent and trustless environment.

DApps have found applications in various industries, including finance, supply chain management, gaming, social media, and more. They have the potential to disrupt traditional industries, improve efficiency, and empower individuals by giving them more control over their digital lives.

Some examples of dApps with the replacement of various social media apps we use daily:

1. Brave Browser: A privacy-focused web browser that rewards users with cryptocurrency for opting into ads and supports decentralized web applications. It is an alternative to Chrome.

2. DTube: It is a decentralized video platform built on the STEEM blockchain and IPFS peer-to-peer network. It is an alternative to YouTube.

3. Secretum: It is a decentralized messaging app. It is an alternative to WhatsApp

4. Audius: It is a decentralized music platform. It is an alternative to Spotify.

5. Presearch: It is a decentralized search engine. It is an alternative to Google, Yahoo etc.

Conclusion

Web 3.0 represents an exciting vision for the future of the internet. By leveraging emerging technologies, decentralization, and enhanced interoperability, it has the potential to unleash a new wave of innovation and transform various aspects of ours.

Thank you for reading the blog. More on Web 3.0 will be on my upcoming blogs.

Like, Share and Comment. ♥

Introduction

We always try to solve a particular problem in one shot, but this is not the right way to tackle a problem. We always have to break the problem into smaller parts and solve those smaller parts to get to the full solution of the problem. So the steps include to solve a problem are as follows:

• Understand the problem

• Analyze the problem

• Break the problem into small parts

• Solve the small parts

• Combine the small parts solution to get the full solution

How to think, apply and build?

Before starting to solve a problem, you have to read the problem and understand it deeply. And once you understand the problem deeply, you can write down the steps to solve the problem in the paper because it will help you to solve a problem more efficiently. For solving the problem, you can divide it into small parts and solve those small parts because it may be difficult to solve a big problem in one go but it is always easy to solve a small problem since a small problem doesn't need to include all resources. A small problem only solves a particular problem. And after solving small problems, you can combine those solutions to get the full solution of the problem.

As for building an application, different developers work on different parts of the application such as front-end, back-end, database etc. But what happened if only one developer did all jobs? It would be a very difficult task, right? That's why we have to divide a problem into chunks to make the problem-solving task easier.

Importance of flow-chart

The flow chart is also an important concept to solve a particular problem. Flow charts give step-by-step instructions to solve a problem. Certain symbols are used in the flow chart and each symbol has a certain meaning. An example of a flow-chart "To check for odd/even for an input" is:

In this flow chart, the problem is divided into smaller sections. So first of all the program starts, then a variable is declared named 'n' and then input is taken from the user, then a condition is checked and depending on the result of the condition different statements are printed and at the last, the program stops.

So now it would be easier to write code from this flow chart.

Code:

import java.util.Scanner;

public class Example{
    public static void main(String[] args)
    {    
        // Program starts

        // Creating object of the scanner class to take input
        Scanner o = new Scanner(System.in); 

        int n; // Initialization of variable

        // Taking the input from the user
        System.out.println("Enter a number");
        n = o.nextInt();

        // Now checking whether the number is even or odd
        if(n % 2 == 0)
            System.out.println("The number is even");
        else
            System.out.println("The number is odd");

        // program stopped
    }
}

Example

Let's take a programming problem to understand how to solve a problem practically. We will divide the problem into smaller sections and then solve those smaller sections to get to the full solution of the problem.

Question

Write a program to take a number (n) as input from the user and print n lines of this pattern:

Solution:

Let's first analyze the problem by breaking it into small parts. So the steps to solve this problem are:

• First of all, we have to take the input n

• The pattern has n lines. So to print multiple lines we need one loop.

• Again in each line, there is an increasing number of stars i.e. with each line the number of stars is increasing by one. So again we need another loop inside the previous loop. That means there are two loops, one is an outer loop and the other one is an inner loop.

• Now we have to think about the conditions of the loops. The outer loop is taking care of the number of lines so the outer loop will run for n number of times since there are n lines. And the inner loop will run suppose k times, where k is the nth line because if we observe the pattern we will see the 1st line has one star, 2nd line has two stars, 3rd line has three stars and so on, so it depends on the current position of the line.

• Now we use a print statement inside the inner loop to print a star.

• And use a line break inside the outer loop and the inner loop finishes.

With this small steps you can finally solve the problem easily like the code below.

import java.util.Scanner;

public class Example{
    public static void main(String[] args)
    {    
        // Creating object of the scanner class to take input
        Scanner o = new Scanner(System.in); 

        int n; // Initialization of variable

        // Taking the input from the user
        System.out.println("Enter a number");
        n = o.nextInt();

        // Now printing the pattern

        //Outer loop
        for(int i=0;i<n;i++)
        {   
            // Inner loop
            for(int j=0;j<=i;j++)
            {
                System.out.println("*");
            }

            System.out.print("\n");
        }    
    }
}

This is it for this blog. Stay tuned for my next blog.

Like, Share and Comment. ♥

What is Docker?

Docker is a platform where you can containerize applications. Containerizing an application means packing up all the resources which are necessary to run the application on any machine.

As in the above diagram, if an application has to run the application on any machine successfully then it needs suppose 4 resources front-end, back-end, database and other system requirements. Then we can put all resources in a container to make sure whenever a person uses this application by using this container, the application will run on any machine because it already has the resources in the container to run the application.

What is the need?

Before going to the need for docker let's first understand various ways through which we can run our application on a machine. There are three concepts to running an application on a machine and those are the Traditional concept, Virtualization concept, and Containerization concept.

• Traditional Concept: In the traditional concept, the host OS run on top of hardware and at the top of the host OS all the apps will run. As given in the diagram.

  Let's take an example to understand its disadvantages. Suppose you created an app that needs certain resources and hardware to run the app and you give the app to your friend to run on their computer. But your friend doesn't have access to the resources and hardware required for the app to run on his computer. So basically your friend can't run the app on his machine. This is bad right? So the traditional concept is not that good.

• Virtualization Concept: Before starting with the virtualization concept you have to know about certain terms like a hypervisor, virtual machine, and guest OS.

  • Hypervisor: A hypervisor is a software that creates and runs Virtual Machines. A hypervisor can run multiple Virtual Machines on the host OS.

  • Virtual Machine: Virtual machine is a digital version of a physical machine or computer. It can do all the things that a physical machine can do but it doesn't have any physical existence.

  • Guest OS: Guest OS is the operating system that runs on a particular Virtual Machine on top of a host OS.

So in the virtualization concept, the host OS run on top of hardware and top of the host OS there is a hypervisor. And the hypervisor creates and runs different virtual machines. And on the top of each virtual machine, there is a different guest OS to run different applications on each guest OS.

Now let's take the same example to understand its disadvantages compared to the containerization concept. So if you want to give the application to your friend then your friend will create and run a Virtual Machine and use a guest OS to run the app on his computer system. But creating different Virtual machines and using a guest OS in each Virtual Machine on top of a host OS is overweight. This is the disadvantage of using the virtualization concept.

• Containerization Concept: In the containerization concept, the host OS run on top of hardware and top of the host OS there is a container runtime that creates and runs a container. And inside each container, our apps will run.

  Again let's take the same example to understand its benefit. So if you want to give the application to your friend then first pack up all the required resources to run the application in a container and give the container to your friend so that your friend can run the application on his computer without any interruption since already all the required resources are in the container. That's why it is a lightweight concept since we don't have to use different guest OS on our computer system.

What is Container?

A container is a place where all the resources to run an application are packed up. You can think of a container as a box that contains all the resources to run an application such as front-end, back-end, databases, system resources and everything.

Let's take a good example to understand this concept. Suppose you prepare a dish in your home and you want to send the dish to your friend so that your friend can also taste the dish and can give you some compliments. But the problem is your friend's home is too far and to go to your friend's home takes 20 hours. If you send the dish to your friend then it will get worse. So now what would you do? The solution is to pack all the required ingredients for the dish and the recipe of the dish in one box and send the box to your friend so that your friend can prepare the food and can enjoy it. So here container is the box which contains all the resources for the dish.

What is an Image?

An image is a set of instructions to create a container. We can create an image of any application. So as the name suggests, an image is the photo of the application and by seeing that photo containers are created by the container runtime.

What is Container Runtime?

Container runtime, also called container engine, is software that creates and runs containers on the host OS. A container runtime has several jobs. It loads container images from a repository like Docker Hub, gets information about local system resources, isolates system resources for the container, and manages the container lifecycle.

What is Docker Hub?

Docker Hub is an online registry of docker where all the images of a container are stored. And we can pull an image from the docker hub to create and run a container in our machine.

Thank you for reading the blog. More on docker will be on my upcoming blogs.

Like, Share and Comment. ♥

Well, to be honest, when I first got my laptop, I am very noob at typing but before getting the laptop I learned a lot of programming languages. So you can say before getting a laptop, I already become a quite good coder which I learned through mobile. But when I started coding on the laptop I faced lots of difficulties in writing programs because of my poor typing skills. Then, I decided to learn touch typing as soon as possible.

Benefits

It will increase your typing speed but except that it will also save you valuable time. If you are a programmer, who always writes codes and stuff, for them touch typing is a great skill. It will help you every day. For me, touch typing just changed my entire workflow and I am just enjoying it.

How to do touch typing

In touch typing, we use all ten fingers. And every finger is dedicated to some specific key. The chart of keys for each finger:

While practicing touch typing you should keep in mind some points mentioned below:

1. Eyes should be on the screen, not on the keyboard.

2. The back should be straight.

3. You need lots of patience.

4. Don't use the mouse every time.

While practicing touch typing you should put your both hands on the middle row of the alphabet and you will notice in the keys F and J there is some mark on every keyboard, it is to place your hand correctly on the keyboard without looking at the keyboard. The right way to place your hand on the keyboard is:

In the learning process of touch typing, you will face lots of demotivation while you compare yourself with others who are good at typing but don't do this mistake. You have to understand that they went through the same process, so don't compare. It will take 1-2 months to get a good speed. And you have to do regular practice per day for 1 hour to learn touch typing. So start touch typing practice from today.

Resources

Before giving you some best resources, I want to say that I am not promoting any websites here, I am just giving you some of my favorite websites to practice touch typing.

1. www.keybr.com

2. www.typingstudy.com

3. www.typingclub.com

This is it for today's newsletter. If you find this blog helpful then share it. See you in the next blog.👋