Forem: Kushal sharma

What are HTTP headers in a REST API?

Kushal sharma — Tue, 31 Oct 2023 15:58:18 +0000

In a REST API, HTTP headers are often used to provide information about the request or response, such as the format of the data being sent or received and the type of authentication being used.

A request header is a key-value pair that provides information about the request context so that the server can tailor the response.

Some commonly used request headers are:

Content-Type: This header specifies the format of the request or response body, such as application/json for JSON data or application/xml for XML data.

Accept: This header specifies the format of the data that the client is willing to receive in the response.

Authorization: This header is used to provide authentication credentials, such as an API key or a token. The specific format of the credentials will depend on the authentication scheme being used.

Cache-Control: This header is used to specify caching behavior for the response, such as whether the response can be cached and for how long.

Content-Length: This header indicates the number of bytes contained in the request or body.

So, one full example of request headers while sending the request looks like this:

Content-Type: application/json
Accept application/json, application/xml
Authorization: Bearer YourAccessToken123
Cache-Control: max-age=86400

The above request headers tell the server that it's sending JSON data prefers JSON but can also accept XML, uses an access token for authorization, and allows caching the response for up to one day.

I hope you like this article and have understood the use of HTTP headers. If you enjoyed it, please like, comment, and follow for more cool stuff.

If you are on Twitter can you follow me there as well, I keep posted these kinds of stuff there as well => // Detect dark theme var iframe = document.getElementById('tweet-1718621312867016831-61'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1718621312867016831&theme=dark" }

How Understanding Falsy Values Can Improve Your Javascript Code Readability

Kushal sharma — Sun, 24 Sep 2023 14:13:27 +0000

In JavaScript, falsy values are values that are considered "false" when encountered in a boolean context.

Understanding the use of falsy values can help you reduce boolean checks in your code. The number 0 (including -0), null, undefined, false, NaN, and an empty string ("") are considered falsy values in JavaScript.

This is the only theory that needs to be known. Now, let's explore how to apply this concept in real-life examples. I will provide some real-life examples.

Suppose we have an array of users:

const users = [
  {
    name: "Kushal",
    marks: 99
  },
  { name: "" },
  {
    name: "John"
  },
  { name: null, marks: 87 },
  { marks: 34 },
  {
    name: "Bob",
    marks: 0
  }
];

Requirement 1

Print users whose name has at least 1 character.

The normal way to achieve this is:

for (let i = 0; i < users.length; i++) {
  if (
    users[i].name !== undefined &&
    users[i].name !== null &&
    users[i].name !== ""
  ) {
    console.log("User name is", users[i].name);
  }
}

However, using falsy values, you can simplify the code like this:

for (let i = 0; i < users.length; i++) {
  if (users[i].name) {
    console.log("User name is", users[i].name);
  }
}

In this case, if the name comes from any of the falsy values like undefined, null, an empty string, or others, it will be considered false in the if block.

Requirement 2

Print the user name if it exists; otherwise, print "N/A".

The normal way to achieve this is:

for (let i = 0; i < users.length; i++) {
  if (
    users[i].name !== undefined &&
    users[i].name !== null &&
    users[i].name !== ""
  ) {
    console.log("User name is", users[i].name);
  } else {
    console.log("User name is N/A");
  }
}

Using falsy values, you can simplify the code like this:

for (let i = 0; i < users.length; i++) {
  console.log("User name is", users[i].name || "N/A");
}

Hope you like the article, if you please consider to like and comment.

And you are on Twitter can you follow me there as well, I keep posted these kinds of stuff there as well => Follow @kushal_js

// Detect dark theme var iframe = document.getElementById('tweet-1704335992231244016-973'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1704335992231244016&theme=dark" }

Top 5 Tips for Becoming a Proficient Programmer

Kushal sharma — Sun, 17 Sep 2023 16:13:06 +0000

Becoming a proficient programmer requires time, practice, and dedication. Here are the top five tips for beginners, drawn from my four years of experience, to assist you on your journey:

1. Learn the Fundamentals:

Maintain a strong grasp of programming fundamentals such as variables, data types, loops, conditionals, and functions in your chosen language. Deeply understanding these basics is crucial, as they remain consistent across languages. This knowledge will facilitate faster learning when you need to pick up a new language in the future.

2. Choose the Right Language:

Select a programming language that aligns with your goals. For instance, if you aspire to become a web developer, start with HTML and CSS. If your aim is data science, Python is an excellent choice. After mastering the language basics, explore the most in-demand frameworks and libraries in the market related to your chosen field.

3. Practice Regularly:

Programming is a skill that thrives with consistent practice. To enhance your coding speed and proficiency, engage in regular practice. Solve coding challenges, work on personal projects, participate in hackathons, and strive to write code every day to reinforce your skills.

4. Read Code:

Examine code written by others, particularly in open-source projects. This exposure will familiarize you with diverse coding styles, best practices, and real-world applications. Learning from existing codebases can significantly accelerate your growth as a programmer.

5. Stay Informed:

The tech industry is perpetually evolving. Stay updated with the latest developments in the field by following tech-related blogs, keeping an eye on industry trends, tools, and emerging languages, and connecting with tech enthusiasts on social media to stay informed about current events and news.

Remember that becoming a proficient programmer is a journey rather than a destination. Embrace challenges and setbacks as opportunities for learning and growth. Continuously challenge yourself to improve, and over time, you will undoubtedly become a more skilled and capable programmer.

If you are on Twitter can you follow me there as well, I keep posted these kinds of stuff there as well => // Detect dark theme var iframe = document.getElementById('tweet-1703431207676227934-492'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1703431207676227934&theme=dark" }

Top 7 JavaScript One-Liners: Your Path to Cleaner, Readable Code 📜

Kushal sharma — Sat, 16 Sep 2023 11:03:49 +0000

Hi, in this article, we are going to discuss how a one-liner in JavaScript can improve our code quality and readability.

First, let's discuss what one-liners in JavaScript are.

This is not a JavaScript keyword or anything specific in JS; it's just a term that refers to accomplishing coding tasks in a single line, instead of using multiple lines or blocks.

For a better explanation, I am going to first write code in the traditional, or less efficient, way and then demonstrate how one-liners come to the rescue.

1) Sum of an array of elements

let numbers = [1, 2, 3, 4, 5];
let sum = 0;
for (let i = 0; i < numbers.length; i++) {
  sum += numbers[i];
}

one-liner

let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((acc, num) => acc + num, 0);

2) Removing Duplicates from an Array

let numbers = [1, 2, 2, 3, 4, 4, 5];
let uniqueNumbers = [];
for (let i = 0; i < numbers.length; i++) {
  if (!uniqueNumbers.includes(numbers[i])) {
    uniqueNumbers.push(numbers[i]);
  }
}

one-liner

let numbers = [1, 2, 2, 3, 4, 4, 5];
let uniqueNumbers = [...new Set(numbers)];

3) Swap Two Varaibles

 let a = 10;
 let b = 20;
 let temp = a;
  a =b;
  b = temp;

one-liner

[b, a] = [a, b]

4) Reverse a string

let str = 'hello';
let reversedStr = '';
for (let i = str.length - 1; i >= 0; i--) {
  reversedStr += str[i];
}

one-liner

let str = 'hello';
let reversedStr = str.split('').reverse().join('');

5) Count Occureance of elements in array

let numbers = [1, 2, 2, 3, 4, 4, 5];
let count = {};
for (let i = 0; i < numbers.length; i++) {
  if (count[numbers[i]]) {
    count[numbers[i]]++;
  } else {
    count[numbers[i]] = 1;
  }
}

One-liner:

let numbers = [1, 2, 2, 3, 4, 4, 5];
let count = numbers.reduce((acc, num) => {
  acc[num] = (acc[num] || 0) + 1;
  return acc;
}, {});

6) Checking if an Object Contains a Specific Key

let myObject = { name: 'Alice', age: 30 };
let hasKey = false;

for (let key in myObject) {
  if (key === 'age') {
    hasKey = true;
    break;
  }
}

One liner

let myObject = { name: 'Alice', age: 30 };
let hasKey = 'age' in myObject;

7) Find Intersection of Two Array

let array1 = [1, 2, 3, 4];
let array2 = [3, 4, 5, 6];
let intersection = [];

for (let i = 0; i < array1.length; i++) {
  for (let j = 0; j < array2.length; j++) {
    if (array1[i] === array2[j]) {
      intersection.push(array1[i]);
      break;
    }
  }
}

One liner

let array1 = [1, 2, 3, 4];
let array2 = [3, 4, 5, 6];
let intersection = array1.filter(value => array2.includes(value));

Hope you liked this article, The above examples come into our day-to-day life. Hope when it comes next you will use a one-liner for that ;)

If you are on Twitter, can you follow me there as well? I post these kinds of stuff there as well. => Follow @kushal_js

// Detect dark theme var iframe = document.getElementById('tweet-1703431207676227934-224'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1703431207676227934&theme=dark" }

Bun 1.0 got released, its Packager Manager is 10x faster then yarn

Kushal sharma — Sat, 09 Sep 2023 07:40:02 +0000

Hi! Recently, Bun 1.0 was released on September 8th. Bun is an all-in-one toolkit designed for building, testing, debugging, and running JavaScript and TypeScript applications. It has now reached a stable, production-ready status, and it's impressively faster.

I recently used Bun as an alternative to installing packages in my project folder, and the difference in speed is remarkable. While using Yarn, it took 21.13 seconds to install the packages, but Bun managed to install all the packages in less than one second.

Here's a comparison between using Yarn and Bun:

using yarn

using bun

I highly recommend giving Bun a try and comparing it with the package manager you are currently using.

How to Install

npm install -g bun

Now, navigate to your project directory, delete your previous node_modules folder, and run:

bun install

Additionally, you can use Bun as a bundler and a test runner. I initially tested its package manager capabilities and couldn't wait to share this with you. Later I will try its bunder feature and let you know the comparision

If you are on Twitter, can you follow me there as well? I post these kinds of stuff there as well. => Follow @kushal_js

// Detect dark theme var iframe = document.getElementById('tweet-1703431207676227934-248'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1703431207676227934&theme=dark" }

Manage Forms in React Like Pro

Kushal sharma — Fri, 30 Dec 2022 13:02:56 +0000

Hi, as a developer we always need to handle the forms and when we talk about the forms we also need to deal with the field validations, show the error messages, Mange the submitting status

If we start to write all these conditions from the scratch in the code we need to take a lot of state in your component for example let's take an example of login form requirements

The requirements are as below

We need to bind the form values
We need validation on the form if the email field is empty we have to show the “please enter email” error and if the email is incorrect we have to show the “please enter the correct email” error and for the password field it must be greater then 6 characters validation
When the form is submitting, we need to show the spinner in the button

Let us think about the logic for the above requirement

You must be thinking about the below logic

Take one submitting state which stores the submitting status
Take two states' email and password for storing email and password
Take two more states for storing errors for email and password both
And also to show the correct validation error you will make one function checkValidation which checks the validation and set the errors accordingly

States:

const [email, setEmail] = useState("");
  const [password, setPassWord] = useState("");
  const [emailError, setEmailError] = useState("");
  const [passwordError, setPassWordError] = useState("");
  const [isSubmitting, setISSubmitting] = useState(false);

Validation logic:

  const validateForm = () => {
    if (email) {
      const isCorrectEmail = false; // regex logic let take false as example
      if (!isCorrectEmail) {
        setEmailError("plase enter email");
      }
    } else {
      setEmailError("plase enter email");
    }
    if (password) {
      if (password.length < 6) {
        setPassWordError("password must be of min 6 characters");
      }
    } else {
      setPassWordError("plese enter password");
    }

    if (!emailError && !passwordError) {
      // submit from logic goes here
    }
  };

UI:

 <div className="App">
      <div style={{ display: "flex", flexDirection: "column" }}>
        <input placeholder="email" onChange={(e) => setEmail(e.target.value)} />
        {emailError && <span>{emailError}</span>}
        <input
          placeholder="password"
          onChange={(e) => setPassWord(e.target.value)}
        />
        {passwordError && <span>{passwordError}</span>}
        <button
          onClick={() => {
            validateForm();
          }}
        >
          {isSubmitting ? "Spinner" : "Submit"}
        </button>
      </div>
    </div>

as you can see for just keeping track of two fields values and validation we have to write a lot of the boilerplate code. here is the formik that comes to the rescue.

What is Formik?

Formik is a form management library that helps us manage the form state without pain, formik can help you to bind the input fields, keep track of the form submitting status, manage from submissions count, and manage validation, for validation we will integrate Yup with the fromik.

Enough talk right :)

Let's install the dependencies and write some code

formik : “yarn add formik”
Yup : “yarn add yup”

you can also use any other library rather than yup but it is the most used formik so I am taking the example of that

formik provide the useFormik hooks that provide all the form helpers functions and the form values and error status.

Lets import dependencies:

import { useFormik } from "formik";
import * as Yup from "yup";

let setup useFormik Hooks:

  const formik = useFormik({
    initialValues: {
      email: "",
      password: ""
    },
    validationSchema: Yup.object({
      email: Yup.string()
        .required("email is requied field")
        .email("plese enter correct email"),
      password: Yup.string()
        .required("password is required")
        .min(6, "password must be of 6 characters")
    }),
    onSubmit: (values) => {
      onFormSubmit(values);
    }

});

let's go though all the properties one by one, the initalValues store the initial values of the form, validationSchema defines the validation for the fields, if you don’t need validation for any field you can skip that in the validation schema object

in the formik use get a lot of variables and helper functions

 const { values, errors, submitForm, isSubmitting, handleChange } = formik;

values stores the from values in JSON type, errors also stores any errors in the JSON type, submitForm submit the forms and when we call this it will call onSubmit function written inside the useFormik hook, isSubmitting returns boolean whether the form is submitting or not, handleChange is the from helper.

Keep in mind that if we call the submitForm function and if there are any errors the form will not get submitted, when we call this first the form gets validated and if there are any errors formik adds them in the errors JSON.

let's bind all these to our form

 <div className="App">
      <div style={{ display: "flex", flexDirection: "column" }}>
        <input
          placeholder="email"
          name="email"
          onChange={handleChange}
          value={values.email}
        />
        {errors.email && <span>{errors.email}</span>}
        <input
          value={values.password}
          name="password"
          placeholder="password"
          onChange={handleChange}
        />
        {errors.password && <span>{errors.password}</span>}
        <button
          onClick={() => {
            submitForm();
          }}
        >
          {isSubmitting ? "Spinner" : "Submit"}
        </button>
      </div>

in the input, you can see I have passed handleChange helper to the input field, handleChange automatically bind the values with formik state but make sure you are also passing the name props with the field value specified in the initalvalues

you can get the form values in the values variable and errors in the errors one

final Output:

Hope you liked the Blog, if you like to read about React, Typescript, and Node stuff, You can follow me

which is your fav CSS color while debugging on the frontend

Kushal sharma — Tue, 25 Aug 2020 13:46:09 +0000

border: "1px solid .......";

which is your fav CSS color which you use while debugging on the frontend?

👨‍💻 Make AutoComplete Input Box In Pure Javascript 🔥🔥

Kushal sharma — Tue, 18 Aug 2020 09:42:50 +0000

Hi folks, I hope that you are doing well and are trying to learn some new things during this quarantine. I have started to write a blog with all the free time I have; due to the lockdown in India.

So, in this post, we are going to learn how to code a simple search with autocomplete functionality (like Google shows while you search for some stuff). We are not going to deal with the backend for this one. I will write another blog for that. So let's get started...

Below is an example of what we are going to build

First, we type the HTML for the simple app as follows:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <link rel="stylesheet" href="index.css"/>
</head>
<body>
   <div class="container">
        <div class="search-container">
           <input type="text" onkeyup="filterNames(event)">
       </div>
       <ul class="list-container" id ="list-container">
           <li>Kushal Sharma</li>
       </ul>
   </div>
</body>
<script src="index.js"></script>
</html>

Now, let's style the app with a little bit of CSS:

*{
   box-sizing: border-box;
   margin: 0px;
   padding: 0px;
}
.container{
   margin-top: 25px;
   margin-left:auto;
   margin-right: auto;
   min-height: 500px;
   width: 80%;
   border: 1px solid black;
}
.search-container{
   width: 100%;
}
.search-container input{
   width: 100%;
   height: 40px;
   font-size: 25px;
}

.list-container li{
   list-style: none;
   border: 1px solid red;
   padding: 15px 15px;
   font-size: 25px;
}

Now our app looks like this:

This very little amount of styling is ok to accomplish the autocomplete functionality. Now for the process of the autocomplete; we need to filter the records that match with our typed character. To do that we are going to store those records in an array with JSON.

Next, let's make a new file saved as index.js and type the following code:

const names = [
   {
       name:"kushal sharma",
   },
   {
       name:"Jeremy",
   },
   {
       name:"john",
   },
   {
       name:"sandeep",
   },
   {
       name:"mohit",
   },
   {
       name:"sanjeev",
   },
   {
       name:"maininder",
   },
   {
       name:"Ajay",
   }
]

(A simple array literal such as ' name = [“kushal”,”jeremy”,”john”,”sachin”] ' could work too, but I prefer to use JSON).

When we open our index.html file, we want the names to display so we can filter among them. To do this we need to make each name into an HTML DOM element. We will use a function to convert our names into DOM elements and display them on the UI like this:

function renderNames(arrayOfNames) {
   let liElemet = "" ;
   for (let i= 0; i <arrayOfNames.length; i++) {
   liElemet += `<li>${arrayOfNames[i].name}</li>`
   }
   document.getElementById("list-container").innerHTML= liElemet;
}

So here we made a function renderNames that accepts the arrayOfNames argument which consists of the array of names we created previously.

On this line of code, we are making a list

element and writing the names one by one inside of the element.

liElemet += `<li>${arrayOfNames[i].name}</li>`

Once we make all the

elements of names we are telling the javascript to add all these as the child of list-container which is an unordered list

Now, we need to invoke this function by passing it the array of names like this:

renderNames(names);

Now we can see the List of all of our names:

Next, we will work on the main functionality. First, we need to catch what we are typing. For this, we will use the HTML events with JavaScript code. Whenever a change happens in the browser window is an event. If you press a key, it is an event. Moving the mouse and resizing your window is also an event. So we need to deal with the keyboard keypress event since we are conducting a search.

<input type="text" onkeyup="filterNames(event)">

Here we have added the onkeyup attribute and it calls the filterNames() function and passes the event as an argument. The event argument contains all the information about the event, from where it has fired, what the target element is, what the value is, etc.

So let’s create the filterNames() function:

function filterNames(event) {
   var searchvalue = event.target.value;
   var filterNames = names.filter((v,i)=>{
       return(v.name.includes(searchvalue));
   })
   renderNames(filterNames);
}

Inside the filterNames() function we are catching which key is pressed using " event.target.value " and then we are filtering through the names of the array and returning only those names which included the typed character. And then again, invoking the renderNames() function with the new array of names returned by the filter() method.

Now you can see in the search example, as I typed the characters "sa" two names were returned "sandeep" and "sanjeev" which both contain the characters "sa" in it.

Hooray! We have made a search with autocomplete functionality in pure JavaScript!

I hope you liked this one, and if you have any questions write them down in the comments. Follow me on twitter ⇒ Twitter to see what I am working on daily.

And you can also follow me on Dev to notified when I published a new blog

Hide 🙈 all console logs in production with just 3 lines of code

Kushal sharma — Sun, 07 Jun 2020 08:11:17 +0000

We basically use the console.log() in our JS application to check wether our code is working properly or to replicate the bug or issue in the app. without the logs it is very time consuming and difficult to find the problem.

But these logs are meant for the developer only and you don't want to show these to the end users so we have to remove the console statement or to comment that.

Before i know this stuff i was commenting all the console.logs in my application and deploying the app on the live server. so the console's are not visible to the users

How I hide all the consoles

if (env === 'production') {
    console.log = function () {};
}

Here we are overriding the default console.log function with the new one which was returing nothing. Here we have added the environment check to override console function only if the environment is production. if you don't have environment variable then you can jsut simply do.

    console.log = function () {};

I am using this on my live app to hides the console. If someone know any other method or any disadvantage of using this one. plz leave your comment.

If you are on Twitter, can you follow me there as well? I post these kinds of stuff there as well. => Follow @kushal_js

// Detect dark theme var iframe = document.getElementById('tweet-1703431207676227934-875'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1703431207676227934&theme=dark" }

What is React ⚛️🤔 and the concept of Componets in React

Kushal sharma — Sun, 31 May 2020 16:28:26 +0000

Hmm, You have open this blog then you must be the React Developer or Want to know the about the trending word Reactjs.

What is React JS?

React JS is a JavaScript library used in modern web development to build interactive web applications. The basic idea of react.js is to divide the UI elements into the small components and combine them later to make the whole App. First, see the below Image

Here we can divide the UI of the twitter into the three main components. we will design and develop all those three components separately and combine them to make the main UI. These components can be further divided into separate components. below we divided the twitter card into different components. The heart of the React is a component.
.

Let's try to make a Mockup of the given example into the component
1) Left Component

import React from "react"; 
class LeftComponent extends React.Component {
    render() {
       return(
        This is the left component
       )
    }
}

export default LeftComponent;

2) Middle Component

import React from "react"; 
class MidddleComponent extends React.Component {
    render() {
       return(
        This is the Middle component
       )
    }
}
export default MidddleComponent;

3) Right Component

import React from "react"; 
class RightComponent extends React.Component {
    render() {
       return(
        This is the Right component
       )
    }
}
export default RightComponent;

so we make a component separately acc to their purpose. lets Combile them all

SO basically we import all our components into our main App and combine them all. That all About the component and its usage.

I hope that you like this Post. I don't want to go deeply into the logical syntax of the react for this post. I want to keep as simple as possible. if you want to make a full react tutorial with syntax then give your views in the comments.

To keep up with everything I’m doing, follow me on Twitter. ==> Kushal Sharma

What is ☁️☁️ Cloud Computing and why it is the future of the Tech Industry?

Kushal sharma — Thu, 21 May 2020 13:39:55 +0000

Let's start with the simple definition of cloud computing

Cloud Computing can be defined as a service of providing the Computing Power such as servers, storage, database, Ram, and another service over a network (Internet) rather than physically having the computing resources at the customer location, To offer faster innovation, flexible resources, and economies of scale.

In more simple words we can define cloud computing as storing and accessing data and programs over the Internet instead of your personal computer's hard drive.

Let's take an example to understand cloud computing

You made an awesome eCommerce website and want to connect with the buyers and the merchant to your website for that you need to connect with the world. so you decided that you host your website on the internet.

You go to the market and buys the heavy servers, Lot of Harddisks for storage and rams for the processing power and the other stuff to make a Server where you can host your website. after installing the server you goes to your Internet Provider and asks for the Superspeed Internet and also arrange the 24x7 electricity so your website will never go offline

so you set up everything and plans to launch the website on XYZ date and did a lot of advertisements for your website. When the website goes live on the date the buyers and merchants started visiting your website and within the first 10 minutes, your server crashes due to a large number of visitors that you haven't expected and there was no resource to handle it.

so you again go to the market and buys more RAM's and setup that. Assume on the first day you got 50,000 visitors as you have done the advertisement and the users are also curious to know about your website, but from the second day, your users drop to 5000-6000 visitors. Now the processing power of your server only consumes the 10% Ram and your 90% ram is free and it consumes the electricity while it was not on the use. so you will usually get a more electricity bill.

Now your website starts growing and a lot of the users are signup. suddenly one day some hackers hacked your database and pulled out your user information, so to prevent this you hired security experts to prevent this thing into the future.

To engage more customer you and your marketing team planned a new year sale on the new year. you did marketing about this by doing online ads and giving the ads in the local newspaper. Just before the 1 day of the sale you suddenly got a call from your ISP provider that there will be no internet for the next 2 days due to maintenance.

and there was no other ISP who provide the Internet service to you. so you got into the loss and all your marketing plan goes waste and also you lose your customer because whenever they are visiting your website they are getting some error.

so just to connect to the internet you have to manage multiple things like electricity, internet, Processing power, Storage Capacity, and also security to the database.

What if someone told you that use my servers or computer I guarantee that there will be 24X7 electricity and internet and I will only charge for the resources you use means if you use only 1 GB ram I will only charge for 1 GB usage and also I provide full security to your data and if there are more visitors I will automatically manage the resources like, increasing the ram capacity or servers no. so you usually think that this option is a good one. so That is what Cloud Computing, using other people's resources to host your own application or website.

Top benefits of cloud computing

Cost: Cloud computing cut off the expense for buying hardware and software and setting up and running on-site datacenters—the racks of servers, the round-the-clock electricity for power and cooling, the IT experts for managing the infrastructure. It adds up fast.

Data security: One of the main aspects of any Company is that their data is safe and nobody can breach the security, so the cloud service provides a guarantee that data is securely stored and handled by using advanced security features.

Scalability: Whenever your user size grows you don't need to worry about the scaling you can do that just a few clicks and your resource is scaled up

Automatic Software Updates: The cloud service providers the regular software updates and the security patches so your system is secure and up to date.

Pay For What you use: In the cloud services you will only be billed for the services you used and how many resources you consume.

Nowadays the main leaders for the cloud services are Google Cloud Platform, AWS, Microsoft Azure, IBM Cloud, Oracle Cloud and many more

Nowadays there is so much competition in the industry and everybody wants to launch their service as soon as possible and cloud computing helps in this that's why the cloud computing industry is growing rapidly day by day.

I hope that you like this blog. If you like this one then please leave a comment and follow me to get notified when I posted more stuff about this.

To keep up with everything I’m doing, follow me on Twitter. ==> Kushal Sharma

What is Firebase🔥 and why should you learn it?

Kushal sharma — Tue, 12 May 2020 08:14:08 +0000

Hi, how are you, so you are here to learn about the Firebase that's good. you are on the right path because cloud services are the feature of the Web and mobile applications. So let's get started.

What is Firebase ?

Firebase is a mobile and web application development platform developed by Firebase, Inc. in 2011, then acquired by Google in 2014. As of October 2018, the Firebase platform has 18 products, which are used by 1.5 million apps. (as defined by Wikipedia ).

Firebase is a Backend-as-a-Service (Baas). It provides developers with a variety of tools and services that helps the developer to make web apps, mobile apps, or games regardless of server-side coding, API, or backend data storage. All the backed related stuff is managed by the Google cloud infrastructure. Firebase has some methods to connect with these services and you have to use them to make beautiful apps and websites.

In short, Firebase is a platform that allows you to build web and mobile applications without a server-side programming language.

I am going to start a Firebase series in the dev.to and if you are interested in learning Firebase then leave me a comment so I can know how many are interested in these series. In this first blog, we going to know the products offered by the Firebase and setup our first firebase app.

Some firebase Basic Products and their Usage area

Authentication — user login and identity
Realtime Database — real time, cloud hosted, NoSQL database
Cloud Firestore — realtime, cloud hosted, NoSQL database
Cloud Storage — massively scalable file storage
Cloud Functions — “serverless”, event driven backend
Firebase Hosting — global web hosting
ML Kit —SDK for common ML tasks
Analytics — understand your users, and how they use your app
Predictions — apply machine learning to analytics to predict user behavior
Cloud Messaging — send messages and notifications to users
Remote Config — customize your app without deploying a new version; monitor the changes
A/B Testing — run marketing and usability experiments to see what works best
Dynamic Links — enable native app conversions, user sharing, and marketing campaigns
App Indexing — re-engage users with Google Search integration
In-App Messaging — engage your active users with targeted messages

so lets set up our first app

Go to https://firebase.google.com/ and log in using your Google account.

When you login sees on the top right sight of your screen you will see an option Go to Console, click on that.

now you will be redirected to the home page of the firebase. Which would look like the below screen.

This screen shows your existing project and on the left side, there is + icon to create a new firebase project. Click on the + icon Now you get the following screen

Enter the project name of your choice, just see the below of your project name learning-firebase-f398e8 that was your unique google cloud project id. whenever you create a firebase project. It automatically creates the google cloud project. Enter your firebase app name and press the continue button.

now you got Some user analytics tools you want to enable or disabled. this toll helps to analytics the user of your website or app to check how the visitors are engaging and to the A/B Testing and other analytics tools. for the initial project just disabled it and the press creates a project.

it will take some time to create the project once it finished you will see the following screen.

Congratulations you have set up your first firebase project and are ready to learn the firebase which was on-demand in the current It sector to make the serverless app.

I hope that you like the very first introduction tutorial blog for the firebase. If you like this one then please leave a comment and follow me to get notified when I posted the next part of this Firebase series.

To keep up with everything I’m doing, follow me on Twitter. ==> Kushal Sharma