DEV Community: Hamza Ali

Ensuring Data Consistency in Concurrent API Requests: Introducing the AbortController

Hamza Ali — Sun, 14 May 2023 06:31:28 +0000

Let's say you are working on a project and in that project you want to get the data of the user's friends. Let's say you requested to fetch the data of Adam's friends. But Adam has a lot of friends so the API request takes time to fetch the list of friends. Now before the API has responded you decided that you want to fetch the friend list of Eve and Eve's friend list is short so the API responded quickly with the friend list of Eve and now as the API responded you display the data on the screen. But wait what about the API request of Adam's friend's list? As the API call is in progress when this API is going to complete it will override the result of Eve's friend list and instead of showing the right data we will be displaying the data of Adam's friends instead of Eve's.

You see the bug in the above explanation. So to get rid of the bug we need to abort the API of Adam's friend list. There are many ways to achieve this but for this blog, I will cover the AbortController.

AbortController

The AbortController interface represents a controller object that allows you to abort one or more Web requests as and when desired.

We will use the AbortController in the use effect like this

useEffect(() => {
const controller = new AbortController();
const signal = controller.signal;

fetch('my-resource', { signal })
  .then(res => res.json())
  .then(res => setFriendsList(res))
  .catch(console.log);

return () => controller.abort();

}, []);

But how exactly this AbortController works?

When the abort method on the controller is called, the fetch operation and every subsequent then methods are discarded, and the catch method is executed.

If you are doing anything in the catch block, then you might need to add a new check to make sure that you set the errors in the right scenario. So to check if the API is aborted mid execution you can check if controller.abort.signal is set to true, If it is then the API is aborted mid-execution.

Happy hacking!

Detecting clicks outside an HTML element using the custom React Hook

Hamza Ali — Sat, 11 Feb 2023 14:29:46 +0000

In February 2019 React introduced Hooks. Which empowered the Functional components to have the same powers/features which were only present in React Class component before React 16.8.0. The introduction of hooks gave function components the ability to use state and side-effects with built-in Hooks such as React's useState Hook and React's useEffect Hook.

There are only a handful of built-in hooks in React. However, react also give the developer the option to develop their own Hooks which react states as Custom Hooks. By using the Hooks provided by react as a foundation developers can develop their own hooks that can contain stateful logic.

Before we create a custom hook, you need to know that there are two rules to creating one:

Custom hooks must have "use" as a prefix. It is how React knows to start the logic contained in the Hook and make the returned state and values available to the component. For example useLocalStorage or useBoolean etc. In our case, the custom hook will be named useOutSideClick.
The custom hook is built using built-in React hooks. Therefore custom hook is always a new composition of one or multiple hooks. If a hook doesn't use any hook then it's not a custom hook It will just be a plain javascript function. So in short if you want to create a custom hook then you should use React hooks inside of it.

To explain further what custom hooks are I am going to create a custom hook that will detect if a click has happened outside of an HTML element or a react component.

Implementing the Hook

we are going to create a hook that is going to detect if a click has occurred outside the desired component. This kind of hook is really useful when you are building a Dropdown component, menu or modal. You want to close the window when a click has occurred outside of the modal.

import { MutableRefObject, useEffect } from 'react';

type OutsideNotifierHook = (
    ref: MutableRefObject<any>,
    onOutsideClick: (isInside: false) => void
) => void;

const useOutSideClick: OutsideNotifierHook = (ref, onOutsideClick) => {
    useEffect(() => {
        const handleClick = (e: MouseEvent) => {
            if (ref.current && !ref.current.contains(e.target)) {
                onOutsideClick(false);
            }
        };
        document.addEventListener('mousedown', handleClick);
        return () => document.removeEventListener('mousedown', handleClick);
    }, [ref, onOutsideClick]);
};

export default useOutSideClick;

The code defines a custom hook named useOutSideClick. The Hook allows you to detect clicks outside a specified HTML element and trigger a callback when this occurs.

The hook takes two arguments, ref and onOutSideClick.

ref: ref is of type MutableRefObject that refers to the HTML element you want to track the outside click.
onOutSideClick: this is a callback function that is fired when the click has occurred outside of the element passed as the first argument.

useEffect hook is used to handle the side effect of the component. In this case, add and remove the mouse event listener to the document object.

handleClick function is defined in the useEffect which is passed as the second argument to the event listener. This means that it is going to be triggered when the outside click will occur. It will also determine if the click has occurred outside or inside the ref argument. If the click has occurred outside of the ref argument then it will trigger the callback with false as an argument.

The return argument in the useEffect is to remove the event listener when the component that uses this hook is unmounted.

In the end we are exporting our hook for it to be accessible where we want to use it.

Implementing the Hook

import { useRef, useState } from "react";
import "./styles.css";
import useOutsideClick from "./useOutsideClick";

export default function App() {
  const ref = useRef<any>(null);
  const [visible, setVisible] = useState(false);
  useOutsideClick(ref, setVisible);
  return (
    <>
      <button ref={ref} onClick={() => setVisible(true)} className="drop-down">
        This is a drop down
      </button>
      {visible ? (
        <ul>
          <li>Item 1 </li>
          <li>Item 2 </li>
          <li>Item 3 </li>
          <li>Item 4 </li>
        </ul>
      ) : null}
    </>
  );
}

In this code, we are utilizing our custom hook to hide the list element when the click happens outside of the button component.

useRef: A react built-in Hook to create a reference for the specified element. In our case, we are using it to create a reference for the button element. Which latter on we will pass to our custom hook as a first argument.

visible: we have declared a state variable named visible which we are using to display our list conditionally. If it is false the list will not be visible and if it's set to true, the list will be rendered.

useOutsideClick: First we are importing our cusotm hook from the file name useOutsideClick. Then we are passing two arguments to it. The first one is the reference to the element we want to track click for. and the second is the callback which is going to be triggered once the click occurs outside of the button.

Conclusion

Hooks in React allow developers to add stateful logic to the functional component, providing them with the same capabilities as the class component. The introduction of custom hooks has further extended the possibilities, As developer can build their own hooks and reuse the stateful logic between different components.

Integrating Hashnode Blogs into Your React App with the Hashnode API

Hamza Ali — Wed, 01 Feb 2023 19:33:51 +0000

If you have a portfolio website and you also do blogging then it is only just fair to have representation of your blogs on your website. Same reason for me to integrate Hasnode blogs on my portfolio website. I am currently building my portfolio website and I have a blog section in it. I was looking for a way I could easily set up my blogs on my portfolio.

The problem that I had was I didn't know how I should approach it. Initially, I was thinking of building my own layout for the blog section and placing all the blogs in my source code. But then after spending some time on the internet and looking for the easy way. I finally found a way that let me integrate my Hashnode blog into my portfolio.

Hashnode API

Hashnode has a GraphQL api that exposes Hashnode blogs to the user. In the below attachment, you can see that I have fetched data for the user name hat52 which is my account.

const GET_USER_BLOGS = `
    query GetUserArticles($page: Int!) {
        user(username: "hat52") {
            publication {
                posts(page: $page) {
                  title
                  brief
                  slug
                  dateAdded
                  coverImage
                  contentMarkdown
                }
            }
        }
    }
`;

GraphQL query to fetch data

I am fetching the following data for every blog post that I have posted on Hashnode.

brief: A brief description of the blog
title: Title of the blog
slug: A slug is the part of a URL that identifies a particular article on your blog and explains the page's content
dateAdded: Date when I posted the blog on Hashnode
coverImage: Cover image of the blog post
contentMarkdown: Get the content represented in markdown

Similarly, you can fetch other information about the blog. You can check the Hashnode API Playground to further explore the field that this API allows you to fetch. It allows you to build and try out your request first, and it has detailed documentation of the models available.

Advantages of using Hashnode API

Quick setup: Easily add a blog section to your portfolio website with the Hashnode API.
Powerful tools: Create rich, engaging content with Hashnode's text formatting, image, and code blocks.
Can handle traffic: With Hashnode's scalable infrastructure, your blog section can handle a large volume of readers.
Safe and secure: Your content is protected with Hashnode's security measures, keeping your blog section safe from cyber-attacks.
Customizable design: Personalize your blog section with custom branding, styles, and functionality.
Track success: Use Hashnode's analytics to see how your blog is performing and make informed content decisions.

Fetching Data

I have used the JavaScript fetch method to fetch the data from Hashnode. After fetching that data I will map the response to an interface I defined.

export const fetchBlogs = async () => {
    let allBlogsFetched = false;
    let page = 0;
    const articles = [];

    while (!allBlogsFetched) {
        let response = await gql(GET_USER_BLOGS, { page: page });
        articles.push(...response.data.user.publication.posts);
        if (response.data.user.publication.posts.length === 0) {
            allBlogsFetched = true;
        }
        page++;
    }
    return articles;
};

async function gql(query: string, variables = {}) {
    const data = await fetch('https://api.hashnode.com/', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            query,
            variables
        })
    });

    return data.json();
}

Displaying the content

I am going to use hooks rather than the class component of React. To fetch the data from an API we need to call the API in useEffect. I Will use useState to manage the data fetched from API and to display it on the interface.

const [blogs, setBlogs] = useState<any>([]);

    useEffect(() => {
        const getBlogs = async () => {
            const response = await fetchBlogs();
            setBlogs(response);
        };
        getBlogs();
    }, []);

Now After fetching the data I need to display it on the screen. For that I will use Array.prototype.map to iterate over the blogs array.

{blogs.map((data: any) => {
    return <BlogCard data={data} />;
})}

In the above code snippet, I am returning the BlogCard component for every entry in the array and I am also passing the data object to the component.

Here is the card component that will display the blog. I have used tailwind CSS for styling the card component.

import { getDayMonth } from '@/utils';

export default function BlogCard({ data }: any) {
    const date = getDayMonth(data.dateAdded);
    return (
        <div
            className="rounded-[12px] h-max flex flex-col items-start gap-4 w-[80%] cursor-pointer">
            <div className="rounded-[12px] relative header md:h-[300px] w-full overflow-hidden ">
                <img
                    src={data.coverImage}
                    alt="a"
                    className="rounded-[12px] h-full w-full hover:scale-110 object-fit transition-all duration-500 ease-in-out transform "
                />
                <p className="date flex flex-col items-center w-[40px] h-[50px] absolute right-4 top-10 p-1 rounded-[4px] text-white bg-cyanBlue">
                    <span>{date.day}</span>
                    <span>{date.month}</span>
                </p>
            </div>
            <h5 className="uppercase hover:text-cyanBlue hover:scale-90 transition-all duration-500 hover:-translate-x-6 overflow-hidden truncate w-full text-white font-semibold ">
                {data.title}
            </h5>
            <p className="text-white overflow-hidden truncate w-full">{data.brief}</p>
            <button className="bg-cyanBlue px-4 py-2  text-white rounded-[50px]">Read More</button>
        </div>
    );
}

Result

Conclusion

If you have your portfolio website and you also write blogs then you must have your blog on your portfolio. It increases the user interactivity on your website and also you have another section to show the world.

Above I have explained one of the many ways to integrate blogs into your project. I have explained how we can use GraphQL to fetch data from Hashnode API. Then we looked into how we can call an API with the help of useEffect and how we can store data by using useState hook. After storing the data we needed to Iterate over it to display it on our interface for that we used Array.prototype.map.

Visit the finished site at hamzaa.dev (The site is in progress but you can visit the blog section which is complete).

If you have any suggestions please leave them in the comments.

Connecting your Vercel app to a GoDaddy Domain: A Step-by-Step Guide

Hamza Ali — Fri, 20 Jan 2023 21:03:35 +0000

Deploying your app on Vercel is a straightforward process, and the platform has great documentation to guide you through configuring a custom domain. However, if you are not familiar with GoDaddy, connecting your deployed app to a GoDaddy domain can be a bit challenging. In this blog post, I will walk you through the steps of connecting your Vercel app to a GoDaddy domain, making the process easy and painless.

Deploying your app on Vercel

If you don't have an account on vercel then signup for a free account. After signing up go to overview and click on Add New the button you then click on the project then connect your GitHub repo that you want to deploy on vercel and give it a name that you want after that vercel will handle everything for you. Vercel by default gives you a domain name related to the project that you finished deploying.

After creating and deploying your project click on it. It will take you to the detail page of the project. Then click on the View Domain button.

Add the domain that you have already purchased from Godaddy.

After you add the domain you are given this Invalid Configuration message and given the option to either configure your domain by A record or Nameservers (A Record method recommended). Choose which method you would like to configure your domain.

Go to your GoDaddy account and navigate to the Domain portfolio.

Click on the lock icon in the third column. Enter the verification code in the field that you should have received from Godaddy. What this step will do is it will unlock your domain and make it available to connect to other platforms in our case Vercel.

The next step is to click on the three-dot icon in the fourth column which will open a menu. The options that we are concerned about are Edit DNS and Edit nameservers . We can use either one of these to configure our domain. I will walk you through both.

Edit DNS

After clicking on the Edit DNS option you will be taken to the DNS Management page. You should be able to see different types of entries in the DNS Records table . We need to add the Vercel record info in this table.

After adding the record you might be prompted on vertical to remove an existing A record, which you should do.

Nameservers

You are provided the Vercel nameservers that you can use in GoDaddy.

Now you need to replace Godaddy nameservers with vercel nameservers and then Godaddy will send you an email to verify your action. After you verify these changes will reflect.

Once the configuration is set up correctly, you will no longer see the invalid message instead, you will see Valid Configuration and the redirect to your domain.

In conclusion, connecting your Vercel app to a GoDaddy domain can be a bit challenging, but with this guide, I hope you found the process easy and painless. By following the steps outlined in this blog post, you will be able to successfully connect your Vercel app to your GoDaddy domain, and enjoy the benefits of using Vercel as your app's hosting platform. Happy deploying!

Creating and Downloading a CSV File Using Pure JavaScript - A Step by Step Guide

Hamza Ali — Sat, 14 Jan 2023 19:53:35 +0000

CSV files are an essential part of computer programming. There might some cases when there is some data and you want the user to be able to download it. In that case, CSV file helps the programmer to use them to download data from the browser.

Cav files are simple to store data in the form of tables. It also doesn’t need any extra library to make the download possible. You can use plain JavaScript to implement this functionality in your App. You can open the CSV file in MS Excel and see the data present inside it. Almost every database requires CSV files to back up the data. so without any further ado let's get into it.

If you prefer to see the code in action, check out this video tutorial.

why do we need CSV files?

CSV files store data in a table format that is easy to understand.

They are simple and easy to use for programmers.

Many programmers prefer to use CSV files to download data from a website.

CSV files do not require any third-party libraries to create and download.

You can easily use a CSV file on your website using simple JavaScript methods and commands.

How to Download CSV file?

To download data in the form of a CSV file your data should be represented in a multi-dimensional array like the below code.

var csvFileData = [  
   ['Alan Walker', 'Singer'],  
   ['Cristiano Ronaldo', 'Footballer'],  
   ['Saina Nehwal', 'Badminton Player'],  
   ['Arijit Singh', 'Singer'],  
   ['Terence Lewis', 'Dancer']  
];

Implementation

For this example, I am going to create my data instead of getting the actual data from the web page. For learning purposes, you can follow this blog as it is but if you are here to implement this feature with real data then you only need to replace the csvFileData with your actual data.

<html>  
<head>  
<title> Download CSV file </title>  
</head>  

<script>  
//create CSV file data in an array  
var csvFileData = [  
   ['Alan Walker', 'Singer'],  
   ['Cristiano Ronaldo', 'Footballer'],  
   ['Saina Nehwal', 'Badminton Player'],  
   ['Arijit Singh', 'Singer'],  
   ['Terence Lewis', 'Dancer']  
];  

//create a user-defined function to download CSV file   
function csvDownload() {  

    //define the heading for each row of the data  
    var csv = 'Name,Profession\\n';  

    //merge the data with CSV  
    csvFileData.forEach(function(row) {  
            csv += row.join(',');  
            csv += "\\n";  
    });  

    var hiddenElement = document.createElement('a');  
    hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);  
    hiddenElement.target = '_blank';  

    //provide the name for the CSV file to be downloaded  
    hiddenElement.download = 'Famous Personalities.csv';  
    hiddenElement.click();  
}  
</script>  

<body>  
<h3> Click the button to download the CSV file </h3>  

<!-- create an HTML button to download the CSV file on click -->  
<button onclick="cavDownload()"> Download CSV </button>  

</body>  
</html>

Explanation

This code creates a webpage with a button labeled "Download CSV". When the button is clicked, a CSV file is created and downloaded to the user's device. The file contains a table of data with two columns, "Name" and "Profession," and five rows of data for various famous personalities.

The code first declares an array, "csvFileData," which holds the data for the table in nested arrays. Each inner array represents a row in the table, with the first element being the name and the second element being the profession.

The button's "onclick" attribute calls the function "csvDownload" when clicked. This function creates a string variable "csv" with the first row of the table as the header "Name, Profession". Then it iterates over the data in csvFileData, concatenating each row of data to the "csv" variable, separated by commas and newline characters.

The function then creates a hidden HTML "a" element, which is used to create a link for the CSV file. The link's "href" attribute is set to the "csv" variable, with the "data:text/csv;charset=utf-8," prefix and encoded using the "encodeURI" function. The "target" attribute is set to "_blank" so that the CSV file will open in a new tab/window when clicked. The "download" attribute is set to "Famous Personalities.csv" so that the downloaded file will have this name. Finally, the function triggers the click event on the hidden element, triggering the download of the file.

Conclusion

In this blog post, we have discussed the importance of CSV files in computer programming, and how they can be used to download data from a website. We have also discussed how to create and download a CSV file using plain JavaScript without the need for any third-party libraries. We walked through a code example that demonstrates how to create a webpage with a button that, when clicked, creates and downloads a CSV file with a table of data for famous personalities. It also shows how easy it is to create a CSV file using JavaScript and how it can be used to store data in a table format. This makes it easy for programmers to use and understand and is also very useful in many applications.

Embedding YouTube Videos in HTML: A Step-by-Step Guide

Hamza Ali — Wed, 11 Jan 2023 19:15:26 +0000

Hello everyone, welcome to my latest blog post. Today, I want to talk about a topic that I am sure many of you frontend developers out there can relate to - embedding a YouTube video in your project. Whether you're working on a personal website or a side project, you've likely come across the need to add a video to your page at some point. However, the process of embedding a video from YouTube in HTML can sometimes be a bit tricky. In this post, I will be sharing with you the steps I take when embedding a YouTube video in HTML and also some best practices that I have found to make the process as smooth as possible. So, without further ado, let's get started!

For those who prefer to learn by watching, check out this tutorial video

First of all start with selecting a video from youtube that you want to embed. In my case, I selected a video from my channel in which I describe how we can use meta tags in react.

After selecting a video click on the share button on that video and then a pop-up will open in which you will have different options.

Select embed and copy that code and paste it into your project.

In my case, I have created a new project in which I am going to embed this video. Here is the code snippet of it.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Embed youtube video in HTML</title>
        <link rel="stylesheet" href="index.css" />
    </head>
    <body>
        <iframe
            width="560"
            height="315"
            src="https://www.youtube.com/embed/a7cKMWsgGEM"
            title="YouTube video player"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
            allowfullscreen
        ></iframe>
    </body>
</html>

allowfullscreen: Set to true if the <iframe> can activate fullscreen mode by calling the requestFullscreen() method
allow: Specifies a Permissions Policy for the <iframe>. The policy defines what features are available to the <iframe> (for example, access to the microphone, camera, battery, web-share, etc.) based on the origin of the request.
title: The title the global attribute contains text representing advisory information related to the element it belongs to.
src: Adding a Link to the Desired Video for Embedding.
height and width: Specify the Size.

You can keep the attribute as they are but if you want to style them you can do it by giving the class attributed to the iframe tag.

Here is my final code and its result

<iframe
            width="600px"
            height="300px"
            src="https://www.youtube.com/embed/a7cKMWsgGEM"
            title="YouTube video player"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
            allowfullscreen
        ></iframe>

Embedding YouTube videos in HTML is a simple process that allows you to share rich content with your audience. I hope this guide has helped get you started. Happy embedding!

Use multiple GitHub accounts on same system

Hamza Ali — Wed, 14 Dec 2022 18:36:10 +0000

I was working with two different GitHub accounts one is my personal account and the other is my work account. I had these two accounts set up on different systems but recently my personal system had some connectivity issues so I had to use both of my GitHub accounts on my work system. I did some research on how I can achieve that. In this blog post, I will try to explain how we can solve the problem of using two GitHub accounts on the same machine.

Secure Shell Protocol(SSH)

To use two different GitHub accounts on the same machine we are going to use ssh.

💡 SSH or Secure Shell is a network communication protocol that enables two computers to communicate and share data. An inherent feature of ssh is that the communication between the two computers is encrypted meaning that it is suitable for use on insecure networks. You can read more about ssh here

Let’s Get Into It.

Create SSH Key

We will need to create an ssh key for all the accounts that we are going to use on the machine.

To do that open the terminal and move into the ssh directory
💡 `$ cd ~/.ssh`
Now we need to generate an ssh key. The syntax for the generation of an ssh key is
💡 `ssh-keygen -t rsa -C "email-address" -f "github-username"`
- -C option stands for comment which helps identify the ssh key
- -f option stands for file name which means that whatever name you pass after -f that name will be the name of our ssh key file inside the ssh directory.
After understanding how we can create the ssh key let’s now create the ssh key for our two accounts

Personal Account

💡 ssh-keygen -t rsa -C "[email protected]" -f "personal"

Work Account

💡 ssh-keygen -t rsa -C "[email protected]" -f "work"

After entering the command the terminal will ask for a passphrase, leave it empty and proceed.

What this command will do is it will create two files one with .pub extension and one without any extension. In our case four files will be created in the ssh directory named personal , `personal.pub , work and work.pub`
Add SSH keys to SSH Agent

Our keys will not work until we add them in ssh-agent or they will ask for a paraphrase every time we the key. You can read more about it here.

let's add both of our key to ssh-agent

💡 ssh-add -K ~/.ssh/work
ssh-add -K ~/.ssh/personal

Add SSH key to GitHub

Now to use these newly generated ssh keys we need to add them in our GitHub account. So the work key will go into our work GitHub account similarly our personal key will go into our Personal GitHub account.

Now copy the key form the .pub extension file.
Sign in to GitHub Account
Goto Settings > SSH and GPG keys > New SSH Key
Paste your copied public key and give it a Title of your choice.

Create a Config File and Make Host Entries

After adding the key to our GitHub account we need to create a config file in the .ssh directory and make the host entry.

If the config file is not already created, create a new config file and paste the following data into it.
```
# githubPersonal

        Host personal github.com
        HostName github.com
        PreferredAuthentications publickey
        IdentityFile ~/.ssh/personal

# githubWork

        Host work github.com
        HostName github.com
        PreferredAuthentications publickey
        IdentityFile ~/.ssh/work
```
Now everything is done the only thing that remains is to clone the repositories. To achieve that, copy the ssh URL of the repository that you want to clone and use the below command
💡 `git clone git@{your-username}:{owner-user-name}/{the-repo-name}.git`
if I want to copy a repo from my personal account the above command will look something like this
💡 `git clone git@personal:Hat52/blood-donation.git`
From now on, to ensure that our commits and pushes from each repository on the system use the correct GitHub user — we will have to configure user.email and user.name in every repository freshly cloned or existing before.

To do this use the following commands.
```
     git config user.email "[email protected]"
     git config user.name "Hamza Ali"

     git config user.email "[email protected]"
     git config user.name "Hamza Ali"
```
Pick the correct pair for your repository accordingly.

To push or pull to the correct account we need to add the remote origin to the project
```
     git remote add origin git@personal:{personal-username}/{personal-repo}

     git remote add origin git@work:{user-name}/{work-repo}
```
Now you can use:
```
     git push

     git pull
```
This approach can be used for more then two account.

That is it from this post if you have any question or suggestion please leave them in the comments.

IIFE(immediately-Invoked function Expression)

Hamza Ali — Sun, 04 Dec 2022 19:54:23 +0000

The term immediately-Invoked function Expression was tossed by BEN ALMAN in his blog. Before that it was referred to as self-executing anonymous function. As the name suggests it is a kind of JavaScript function which gets executed immediately after its declaration.
A normal JavaScript function can be declared by one of these methods

//First method
function foo(){ //code }

//second method 

const foo = function (){//code}
//both of these functon can be invoked by putting the pranthesis after their name

foo()
// This will invoke the function and will cause its execution

But what if we want to invoke a function right after its declaration? JavaScript doesn't allow putting parenthesis after a function declaration

function foo(){//code}()
// This will throw syntex error same goes for the other mehtod
const foo = function (){//code}()

//But if we pass argument to the paranthesis after the function declaration no exception will occuer

function foo(){//code}(0)

// This will not throw any exception because JavaScript treets this piece of code in different way

function foo(){//code}

(0)

//This is how JavaScript treets this piece of code.

So we know that JavaScript doesn’t throw errors when we pass some argument to the parenthesis. So to create an IIFE we will pass our function as an argument to the parenthesis and after the parenthesis, we will add another parenthesis to invoke the function that we just passed.

(function(){//code})()

Use cases

Avoid polluting namespace

As our application gets big the need of we want to avoid duplicating the names of our variables to avoid confusion. In case when we know that a piece of code will only execute once we can use IIFE.

(function(){
//code
let veriable1
let veriable2
//code
})()

//As soon as this IIFE gets executed the veriable1 and veriable2 will be discarded and will
//be available to you later in the file

Privacy

we can use IIFE to create private and public variables and methods.

const canYouSeeMe = () =>
    (() => {
        let privateVariable = 5;
        function iamHidden() {
            console.log("haha YOU can't see me");
        }
        return {
            youCanSeeMe() {
                console.log('you can see me');
            }
        };
    })();

const hideSeek = canYouSeeMe();

console.log(hideSeek.youCanSeeMe()); // This will print out "you can see me"
console.log(hideSeek.iamHidden()); // undefined, because this method is private
console.log(hideSeek.privateVariable); // undefined, because this veriable is private

Closure

Before the introduction of let and const in ES6 and block scope. With the var, we only have function and global scope.

Let’s take a scenario

const buttons = document.getElementsByClassName('className');
for (var i=0;i<6;i++){
    buttons[i].addEventListener('click',function(e){
    e.preventDefault()
    console.log(`I am button number ${i}`)
})
}

//what do you think the output of the button click will be.
// If the button is clicked after the execution of the loop all of the six buttons
// will print out "I am button number 6". Because at the end of the execution of the loop
// the value of i is 6.

to encounter this before ES6 IIFE was used

const buttons = document.getElementsByClassName('className');
            for (var i = 0; i < 6; i++) {
                ((index) => {
                    buttons[index].addEventListener('click', function (e) {
                        e.preventDefault();
                        console.log(`I am button number ${index}`);
                    });
                })(i);
            }

// This execution will get you your desired result because of clouser

That's it from this post

If you have any suggestions please leave them in the comments

Add meta tag in react app

Hamza Ali — Fri, 25 Nov 2022 09:52:30 +0000

Background

I was searching for a open source project to contribute to on GitHub. So eventually I did found a project to contribute to.
Take a look a the project.

When I found the project that looked like I could contribute to. I went on to reading the contribution document. After that I found an issue that did not had any assignee yet. So I got it assigned to me.

The issue was to add meta tag in react application in a way that when we share the link of the project on social media. It should display a nice preview image and description about the project.
In this blog post I am going to show to how we can achieve that in react js.

What are META tags?

As w3schools document stats.

The Meta tag defines metadata about an HTML document. Metadata is data (information) about data.
Meta tags always go inside the Head element
Metadata will not be displayed on the page, but is machine parsable.
Metadata is used by browsers (how to display content or reload page), search engines (keywords), and other web services.

Things we can achieve with meta tags

There are many thing that can be achieved by meta tags.

Define key words for the search engine. Which help your site to be searchable when the user search for a specific keyword.
<meta name="keywords" content="HTML, CSS, JavaScript">
Define description of your web page
<meta name="description" content="Meta tags usage blog">
Define Author Name
<meta name="author" content="Hamza Ali">
Setting the viewport to make your website look good on all devices
<meta name="viewport" content="width=device-width, initial-scale=1.0">

What are Open Graph meta tags?

Open Graph meta tags are snippets of code that control how URLs are displayed when shared on social media.
They’re part of Facebook’s Open Graph protocol and are also used by other social media sites, including LinkedIn and Twitter.
You can find them in the Head section of a webpage. Any tags with og: before a property name are Open Graph tags
<meta property="og:title" content="Abbreve" />

We will use open graph to show description when we share the link of our site on social media.

Lets get into

I will be assuming that you already have react project setup and in case you don't have a react app you can create it by running the command npx create-react-app {NAME_OF_YOUR_APP}.

So to add the open graph meta tag we will need to edit the index.html file which is present in the public folder of react app.

Navigate to index.html file and inside the head tag we are going to make changes. Remember META tags are always added in the head.

To add a preview image we will add the following tag.



<meta property="og:image" content="/src/assets/thumbnail.png" />

In the above example we are setting the thumbnail.png as our preview image.

Next we will set the description of our site.



<meta name="description" content="This is a blog about usage of meta tags" />

To add title of the site we will use



<meta property="og:title" content="You site title" />

For twitter we are going to use seperate meta tag which is



<meta name="twitter:card" content="/src/assets/thumbnail.png" />

This will set the image for the link share on Twitter.

At the end your head tag should look like this



  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="proxy.php?url=/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta property="og:title" content="Title" />
    <meta property="og:image" content="/src/assets/thumbnail.png" />
    <meta name="twitter:card" content="/src/assets/thumbnail.png" />
    <meta name="description" content="Description" />

    <title>Title</title>
  </head>

For testing our changes on localhost we are going to use this Extension.

Result

After the above implementation this is what you should get. Remember the content of meta tag should be set According to your need.

That it for this blog. If you have any queries or suggestion feel free to leave them in the comments.

Open Source Contribution

Hamza Ali — Thu, 08 Sep 2022 19:42:06 +0000

I have been into open source for quit a long time but I did not actively take any part in any open source project. Because for me finding a project to contribute was a hectic job . But for past couple of days I am trying to change that mentality of mine and in doing so I found a project that I was excited to contribute to.

Check out the project.

When I found the project on github I went straight to the issue tab and found a issue that I felt I could contribute to. So I commented on it saying that assign this issue to me and lucky It got assigned to me .

A Little Twist in the tail

At first I thought it was a development issue but then after asking some question I found out that it was a designing job and the fun part is I don’t even know the A of web designing. I just know that we have a software called figma for creating the designs for web.

I have been using figma to convert the design to html/CSS but never did I design any thing on figma. Luckily the job was not that tricky. So I watched some tutorial related to my use case and tried building a figma design. And after some work loaded hours I finally got the design ready to share for the issue. The design still have some improvements to do but I am really excited for the task.

I will update you folks once I complete the design but if you want to take a look at the design right now you can go to this link.

This is what I love about open source. Before this issue I thought that I was incapable to design anything but now I am starting to feel like I can take up this job as well. When doing open source you are not bound to share the skill that you have already mastered but you can also learn new skills.

I know building a single page design doesn’t make me a designer but its a start and you never know where you might end up once you take the first step.

Conclusion

I hope this article inspires you to get into the vast world of open source and contribute the evolution of the IT industry and in doing so enhance your skills as well.

How to create and publish npm package.

Hamza Ali — Sun, 04 Sep 2022 10:58:40 +0000

Creating npm package

Creating your npm package may sound difficult to do but it is surprisingly easy. In this blog post we are going to learn how we can create and publish npm package.

Let’s create a folder named square-number you can name your folder whatever you want. Now inside square-number directory run the command npm init -y this will create a package.json file if you want to customize the values in pacakge.json then just run the command npm init and then answer the question that are asked after running the command.

Description of npm package

So for this bolg we are going to create a simple npm package which will only return us the square of a number and if a value other then number is passed, it will return a message saying “Invalid Number“.

Lets code

First we will create a index.js file inside our square-number folder. And inside that folder we are going to simply write a function which will satisfy what we described above.

function square(number) {
    if(typeof number === 'number') {
        return number * number

    }
    return "Invalid Number"
}

The above function is going to be defined in our index.js file. What it does is it take a value and check if the value is of type number if it is then it returns the square of number otherwise if the value is not a number it returns a message saying “Invalid Number”.

This is going to be a node module so we are going to export is from the index.js file by adding this below code at the bottom of our index file

module.exports = square

Before publishing our package we will first need to test it locally for that we run the command npm link

Testing

To test our package we will create a new folder named test. And inside that folder we will test our package by passing the number, string and undefined to it.

First run the command npm link square-number inside the test folder. What this will do is install the package inside test.

After running the command you will notice that a node_modules folder is created in the test folder and inside that node_modules you will find our square-number.

Now to test we will create a index.js file and we will add the below code inside it.

const squareNumber = require('square-number');

console.log(squareNumber(2))
console.log(squareNumber("2"))
console.log(squareNumber(undefined))

At first line we are importing our package and next we are calling the package and passing it the number 2 and on the next line we are passing a string and then we are passing the value of undefined to test if all of our use cases are handled or not. Now lets run our index.js file by running the command node index.js .

You can see that the first call to our package return the square of number 2 and the second and third call returns a message saying “Invalid Number “ because we have passed a string and undefined to it.

Lets now publish our package

To publish we will first need to create npm account. After creating the account we will sing in from our terminal by running the command npm login This will ask you to enter you account credentials.

The next step is to run the command npm publish and this command will publish our package to npm server.

Note

Sometime the name of a package is already taken so to avoid that you might need to create a named space package by just altering the package.json file and change the name of package by adding a prefix to it which should have @ at the start of it @hat52/{name of the package} . To publish the named package you will need to run the command npm publish --access=public what this does is it make the package public because by default name space packages are private.

Conclusion

We have created a simple package which returns the square of the number passed to it. This is just to give context of how we can create a npm package. If you want to go into details of how we can create a complex package . Follow me because I am thinking of creating a time picker package in the near future.

Thanks for reading and if you have any question or suggestion leave them in the comments.

Validating input field when it losses focus

Hamza Ali — Sun, 14 Aug 2022 12:41:13 +0000

There are going to be several scenarios where you will have to call a function when the input field is set to inactive. May be you want to call an api or you want to validate a form field as soon as the input field is out of focus.

onblur

onblur function fires the moment input field is out of focus. This event is not cancelable and does not bubble.

opposite of onblur is onfocus.

Let code to understand this better

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Validation of field on focs out</title>
</head>
<body>
    <form method="post"  >
        <input type="text" placeholder="Email" id='email'>
        <span id='email-error'></span>
        <input type="password" placeholder="Password" id='password' >
        <span id='password-error'></span>
    </form>
</body>
<script>
    const email =document.getElementById("email")
    const pasword =document.getElementById("password")

    pasword.addEventListener('blur',()=>{
        const error= document.getElementById('password-error')
        if(pasword.value?.length < 8){
            error.innerHTML = "password must be 8 or more characters"
            returnb
        }
        error.innerHTML = ""

    })
    email.addEventListener('blur',()=>{
        const emailRegex = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
        const error= document.getElementById('email-error')
        if(email.value.match(emailRegex)) {
            error.innerHTML = ""
            return
        }
        error.innerHTML = "invalid email"
    })
</script>
</html>

Code explaination

we are validation both the password field and email field when they are set to inactive.

In script tag we have attached blur event to both the field which mean as soon as the field go out of focus the second parameter of the addEventListner which is a function will be triggered.

Email validation

We are use regex to validate our email field. We are checking if the value of email field satisfies the regex if it does then we will remove the error from the error span and if the regex is not satisfied we will populate an error saying invalid email

Password validation

For password validation we are check if the length of password is greater then or equal to 8 if it is then we will empty the error span of password and if it is not then we will display error saying password must be 8 or more characters.

Conclusion

You will face a lot of scenarios in your development career where you will have to validate a field or call a function when the field is set to inactive. I have tried to give you a some basic understanding of how you can achieve that .

If you have any queries or suggestions leave them in comment.

Thanks