Forem: Md Amir Gauhar

Polyfills made easy

Md Amir Gauhar — Wed, 12 Jan 2022 05:41:20 +0000

Helloo, my fellow developers!!!

Let's talk about Polyfills today. If you are new to this terminology, I'll make sure that this will make complete sense to you.

Let's just begin...
So, a polyfill basically is a piece of javascript code that is used to provide or fill in some functionality that one browser supports but other might not.

Lets make it easy for you to understand by taking an example.
Let us talk about Array.prototype.forEach(). The forEach() method executes a provided function once for each array element.

forEach() calls a provided callbackFn function once for each element in an array in ascending index order.

const arr = [1, 2, 3, 4, 5]
arr.forEach(val => {
  console.log(val * 2)
})

// The above piece of code will take each element of that array/list and will multiply it by 2.
 2
 4
 6
 8
 10

Now lets pretend that we don't have support for forEach().
// Simulate browser incompatibility
Array.prototype.forEach = null
If we try to run the above code again we'll get the following error:

Now let's write a very simple polyfill for forEach() .

if (!Array.prototype.forEach) {

  // polyfill
  Array.prototype.forEach = function (callback) {
    // callback here is the callback function
    // which actual .forEach() function accepts
    for (let value of this)
      callback(value)
  }
}

Now, if we re-run the forEach() method again, it will work perfectly fine.

Lets take a complete look at our code:

Voilla, we just created a very very rough polyfill for forEach().
Hope you all liked it...

Firebase Google authentication with React

Md Amir Gauhar — Fri, 13 Aug 2021 18:49:14 +0000

Hellooo, my fellow developers.
Today we're going to learn about authenticating our react app with google sign-in using Firebase.

First of all let us talk a little bit about what actually Firebase is.
Google Firebase is a Google-backed application development software that enables developers to develop iOS, Android and Web apps. Firebase provides tools for tracking analytics, reporting and fixing app crashes, creating marketing and product experiment.Firebase offers a number of services, including:

Analytics
Authentication
Cloud messaging
Realtime database
Performance and many more...

Firebase Authentication provides backend services, easy-to-use SDKs, and ready-made UI libraries to authenticate users to your app. It supports authentication using passwords, phone numbers, popular federated identity providers like Google, Facebook and Twitter, and more.

Now let's jump into our project.

First of all we’ll setup our Firebase project. To do that go to firebase.google.com and login in with our google account. We’ll now initialize our app.

Click on Get Started or Go to console at the top right of the webpage.

Now we’ll be taken to Add Project page. Select Add project and keep the project name whatever you like. Now it’ll ask us to choose a Firebase account. We’ll choose the default one. After that it'll redirect us to the Project Overview page.

To add an app click on the web icon. It’ll allow us to create an app and allow us to give a nickname to our app.

Now after registering our app let’s copy the firebaseConfig object which will help us later to initialize our web app and connect it with firebase. The config object will look something like this:

Now to enable the authentication, let’s get back to project overview page and click on the authentication tab then set up sign-in method and enable the Google authentication.

Yaay!!! we are done with the first part of our project. Now here comes the fun part. Let’s write some code.

To begin with coding first of all we’ll create our starter project directory using the following command in the terminal:

npx create-react-app google-auth //google-auth is my directory name

It will create a basic react app boilerplate for us.

Now we’ll install firebase in our app using the following command in the terminal:

npm install firebase

Note If you’re installing firebase for the first time on your system, type the following in the terminal:

npm install -g firebase-tools

Now let's put all that to our use.
We’ll create a service folder and add firebase.js into it and add the following code.

src/service/firebase.js

import firebase from "firebase/app";
import 'firebase/auth';

const firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};

// Initialize Firebase 
firebase.initializeApp(firebaseConfig);

export const auth = firebase.auth();

Next we’ll create a sign-in function which will let us sign-in with google.

src/service/firebase.js

export const auth = firebase.auth();

const provider = new firebase.auth.GoogleAuthProvider();
provider.setCustomParameters({ prompt: 'select_account' });

export const signInWithGoogle = () => auth.signInWithPopup(provider);

The whole code will look like this:

To use this function, we’ll import it to our Login component and add a onClick handler on the sign in button. So. lets create a Login component inside a components folder and add the following code:

src/compenents/Login.js

import { signInWithGoogle } from '../services/firebase';

import '../App.css';

const Login = () => {
  return (
    <div>
      <button className="button" onClick={signInWithGoogle}><i className="fab fa-google"></i>Sign in with google</button>
    </div>
  )
}

export default Login;

Let's import the Login component into our App.js file.
And that’s it. We can now sign-in to our app via our google accounts.

Now let us store the user information so that we can use it in our application. In the App.js file add the following codes.

src/App.js

import { useState, useEffect } from 'react';

import Login from './components/Login';
import Home from './components/Home';
import firebase from './services/firebase';

import './App.css';



function App() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    firebase.auth().onAuthStateChanged(user => {
      setUser(user);
    })
  }, [])

  console.log(user);

  return (
    <div className="app">
      <Login />
    </div>
  );
}

export default App;

Let's create a Home component to use the information that we got after logging in. Create a Home Component inside the components app and add the following code into it:

src/components/Home.js

import React from 'react';

import { auth } from '../services/firebase'

import '../App.css';

const Home = ({ user }) => {
  return (
    <div className="home">
      <h1>Hello, <span></span>{user.displayName}</h1>
      <img src={user.photoURL} alt="" />
      <button className="button signout" onClick={() => auth.signOut()}>Sign out</button>
    </div>
  )
}

export default Home;

Now let's import the Home component into our main App.js file. After importing it'll look something like the following:

Voila, we just created a mini app where we can login with our google account.
Hope you all liked it....

How did I publish my 1st NPM package.

Md Amir Gauhar — Tue, 27 Jul 2021 04:05:49 +0000

Hello fellow developers!
We have came across various npm packages which had made our lives more simpler and easier. If you don’t know what NPM is then let me help you to know a little bit about it. NPM is package manager for NodeJS which was created in 2009 as an open source project to help JavaScript Developers easily share their codes in form of packages.

So in this article I’ll talk about how I published my 1st NPM package. Creating your first NPM package may seem incredibly intimidating but it is actually surprisingly easy. The main focus of this articles isn’t to build a bad-ass npm package but to explain how to build and publish a npm package.

Now let’s get started...
To publish a NPM package, all we need is the NPM command Line tool which is also called npm. When we install NodeJS in our system, we automatically get npm installed in our computer. To download NodeJS visit here.
After installing npm, we can go ahead and start creating our package. Now in the terminal we’ll do the following:

creating the project directory

mkdir reverse-string

change into the project directory

cd reverse-string

Before we start writing our code, we need to add a package.json file to our project. For that run we need to run the following command in the terminal :

npm init

Now we need to answer some questions which is basically about the package we are creating. After answering the questions, the package.json will be created in the root of the project and will look like this

Now let’s start writing our code. We are going to create a package to reverse a string.
Create an index.js file in the root of the project and add the following code for reversing the string.

function reverse(string) {
  return string
    .toLowerCase()
    .split("")
    .reverse()
    .join("");
};

module.exports = reverse;

Now let’s publish the package…
In order to publish the package to NPM registry we need to create an account in the NPM registry. After creating the account go to the email we provided to verify our account. Then we'll go to the terminal and authenticate ourselves using:

npm login.

After entering all the credentials, we can now publish our package using the following command:

npm publish

Note that we may not be able to publish the package if someone else already has a package with same name in the registry. We can simply change the package name to some unique name or simply change it to @username/package-name.
In my case I’ll rename my package name to @mdamirgauhar /reverse-string.

When we have a name-spaced package, NPM tries to make it a private package instead of public. In order to publish our package we need to run the following command in the terminal:

npm publish --access=public.

Voila, we have created our first npm package. Hope you liked it..