DEV Community: Gurmeet Singh

How to use HeadlessUI with React Hook Form

Gurmeet Singh — Sat, 15 Apr 2023 14:57:25 +0000

React Hook Form is a popular library for managing form state and validation in React applications. It makes handling form input and validation a breeze. Headless UI, on the other hand, is a library that provides accessible, unstyled UI components that can be easily customized according to your design system.

Creating complex forms with accessible and stylish UI components can be a challenging task. In this blog post, we will explore how to seamlessly integrate Headless UI with React Hook Form to handle complex form elements like ComboBox and Radio Group. We will also discuss how to add validations and default values to your forms. By the end of this post, you'll be able to confidently use these tools to enhance your projects.

Prerequisites

To follow along with this tutorial, you should have a basic understanding of React and be familiar with React Hook Form and Headless UI. If you are new to these libraries, you can check out their respective documentation:

React: https://reactjs.org/
React Hook Form: https://react-hook-form.com/
Headless UI: https://headlessui.dev/

Integrating ComboBox and Radio Group with React Hook Form

To integrate Headless UI components like ComboBox and Radio Group with React Hook Form, you'll need to utilize the Controller component and the control prop provided by React Hook Form

Integration

Import the required components and hooks from Headless UI and React Hook Form.
Inside your form component, use the useForm hook from React Hook Form, passing the validation schema as an option.
Wrap the component from Headless UI with the Controller component from React Hook Form.
Pass the control prop from the useForm hook to the Controller component.
Use the render prop in the Controller component to render the ComboBox and pass down the necessary props, such as field, fieldState, and formState.

You can see a live example of it here - https://rhf-with-headlessui.vercel.app/

Adding Default Values

To set default values for your form elements, simply pass an object containing the default values to the defaultValues option when using the useForm hook.

An example with default values prefilled can be found here - https://rhf-with-headlessui.vercel.app/?storage=business&user=arlene

Default Behaviour

The headless ui components like combobox and radio group use an array of options and each option in this array is an object. By default, headless ui sends you the complete information of selected option i.e the complete object of the selected option. But, it is very rare that you'll need this. So, I have modified the components to return only the value of the selected option instead of complete object. If you want to stick to the default behaviou you can use the default components i.e, ComboBoxDefault and RadioGroupDefaul from the git repository.

Live example of this can be found here - https://rhf-with-headlessui.vercel.app/default
With a prefilled version - https://rhf-with-headlessui.vercel.app/default?storage=business&user=arlene

Conclusion

By integrating Headless UI with React Hook Form, you can easily create complex and accessible forms with ComboBox and Radio Group components. With the Controller component and the control prop, adding validations and default values becomes a breeze. Now you can confidently use these tools to enhance your projects and create powerful, accessible forms.

The complete source code can be found here - https://github.com/singhBinary/rhf-with-headlessui

How to easy access localhost on your mobile device

Gurmeet Singh — Tue, 07 Mar 2023 10:35:05 +0000

As developers, we spend the majority of our time working on localhost, which is the local server environment for our applications. Localhost is where we test and debug our applications before deploying them to production. However, there are times when we want to access our localhost application on our mobile devices, and that's what we'll be discussing in this post.

There are many reasons why a developer might want to run a localhost application on their mobile device. For example, you might want to test how your application looks and behaves on different screen sizes or operating systems. Additionally, you might want to demo your application to stakeholders.

Whatever the reason may be, we'll guide you through the steps on how to open your localhost application on your mobile device. Although, there are many ways out there to do this but I will be sharing the most easiest ones ways below. By the end of this post, you'll be able to access your localhost application on your mobile device, and you'll be one step closer to creating a seamless development and testing experience. So, let's get started!

Method 1 -

The most intuitive and developer friendly way which I personally use is through localview. Localview is a no BS solution to run any application on your mobile devices with just single line of command without any need for you to search for your IP details. It simply returns a URL/QR code which you can easily share with others.

Simply run the npx localview --port xxxx on your terminal where xxxx is the port where your application is ruuning and that's it.

If you already have localview installed it will show you the QR code and the URL using which you can access the application. If not, it will simply prompt you to install one which you can do by typing "Y" as shown below

Note - A port is like a door that allows communication between different programs on a computer or over a network. When you run a web application on your computer, it uses a specific port to communicate with the web browser. By default, most web servers use port number 80 or 8080. To find out which port your application is using, you can look for it in the code or configuration files of your application or even in your browsers address bar. For instance, for a URL as below

the port is 3000. The port is generally the number that you see after :
Alternatively, you can check the documentation or guides of your application to find out which port it uses by default.

Method 2 -

If you face any issue in the above approach or you do not want to install a dependency for such a minor task. You can follow the steps below

Find your IP address (IPv4) There are a number of ways to do this.
Run ipconfig command on terminal
On windows, go to "Network & internet" -> click on "Advanced network settings" -> Expand the "Wi-fi" option -> click on "View additional properties" Once, you have the IPv4 proceed to the next step.
On your mobile device, open the following URL in any browser: IP(x.x.x.x):PORT(xxxx) (example: 192.168.1.37:3000) where 192.168.1.37 is the IP obtained from step1 above and 3000 is the application port number.

Please note that both the laptop and the mobile device must be on the same network to be able to use any of the above approach.

Polyfill for map in javascript

Gurmeet Singh — Sun, 05 Mar 2023 08:47:47 +0000

The map() method in JavaScript is used to iterate over an array and apply a function to each element in the array, returning a new array with the results. For those who are new to javascript here is a basic example of how map() works

// Define an array of numbers
const numbers = [1, 2, 3, 4, 5];

// Use the map() method to square each number in the array
const squaredNumbers = numbers.map(function(number) {
  return number * number;
});

// Output the new array of squared numbers
console.log(squaredNumbers); // [1, 4, 9, 16, 25]

For an indepth understanding of map() please refer this link

As seen above map() is a very useful method, but not all browsers support it. In this blog post, we will create a polyfill for the map() method so that it can be used in all browsers.

Here's the code for the map() polyfill -

if (!Array.prototype.map) {
  Array.prototype.map = function(callback, thisArg) {
    if (typeof callback !== 'function') {
      throw new TypeError(callback + ' is not a function');
    }

    var newArray = [];

    for (let i = 0; i < this.length; i++) {
      if (this.hasOwnProperty(i)) {
        newArray[i] = callback.call(thisArg, this[i], i, this);
      }
    }

    return newArray;
  };
}

Let's break down this code -

First, we check if the map() method already exists on the Array prototype. If it does not exist, we create our implementation.
We define the map() function on the Array prototype, taking two arguments: a callbackfunction and an optional thisArg parameter.
We check if the callbackargument is a function, and throw a TypeError if it is not.
We create a new empty array to hold the results of the mapping operation.
We iterate over each element in the array, using the hasOwnProperty() method to skip any non-existent elements such as properties added to the array's prototype.
For each element, we call the callback function with the element, the index, and the original array as arguments, using the call() method to set the this value to thisArg if it is provided.
We store the result of the callback function in the new array.
We return the new array containing the mapped results.

And that's it! With this map() polyfill, you can use the map() method on arrays in all browsers, even if they do not support it natively.

git merge vs git pull

Gurmeet Singh — Sat, 21 Jan 2023 06:30:10 +0000

Over the years I have seen developers use two approaches to add code from one branch to another. For example, suppose you have two branches: "main" and "new-feature". You have been working on "new-feature" for a while and now you want to merge the changes you made into "main". To do this, developers generally use one of two ways:

Checkout the main branch and run git merge new-feature
Checkout the main branch and run git pull origin new-feature (This is the approach which is generally used when we create pull requests from the UI of various git hosting platforms (e.g. GitHub, GitLab, Bitbucket))

And I asked many people about this but no one seems to know the exact difference and they had just picked up one approach and been using it forever.

Here's the difference -

git merge is used to merge a branch into the current branch, while git pull is used to fetch and merge changes from a remote repository into the current branch. In other words, git pull is a combination of git fetch and git merge. git fetch retrieves new commits from a remote repository, but does not merge them into the current branch. git merge is then used to integrate the changes from the remote branch into the local branch.

Staircase problem in JS

Gurmeet Singh — Sat, 24 Dec 2022 13:18:38 +0000

Interviews can be an intimidating process, and the pressure can be overwhelming. It’s not uncommon for employers to ask questions in which if you don’t think in the right direction, it could be a game over. With the right preparation and practice, you can be ready for any difficult question that comes your way. In this article, we'll explore one of the questions that got the better of me.

Problem Statement -
There exists a staircase with N steps, and you can climb up either 1 or 2 steps at a time.
Given N, write a function that returns the number of unique ways you can climb the staircase.

const totalSteps=4; 
const stepsInSingleJump=[1,2]; 
function getAllCombinations(){ }
console.log(getAllCombinations(totalSteps, stepsInSingleJump)) 

// output: [[1,1,1,1], [1,1,2], [1,2,1], [2,1,1], [2,2]]

Why not try to write a pseudo code before you see the answer below? It's pretty easy if you can determine what programming concept you have to use here.

Hint - Recursion

function getAllCombinations(totalSteps, stepsInSingleJump) {
  let combinations = [];

  function recurse(currentSteps, currentCombo) {
    if (currentSteps === totalSteps) {
      combinations.push(currentCombo);
      return;
    }
    if (currentSteps > totalSteps) {
      return;
    }

    for (const step of stepsInSingleJump) {
      recurse(currentSteps + step, [...currentCombo, step]);
    }
  }

  recurse(0, []);
  return combinations;
}

console.log(getAllCombinations(4, [1, 2]));

Explanation -

The function uses recursion to explore all the possible combinations of steps. It maintains a combinations array to store the combinations and a currentCombo array to store the current combination being built.

The base case is when the currentSteps is equal to totalSteps. In this case, the currentCombo is added to the combinations array. The recursion ends when currentSteps becomes greater than totalSteps, since it is not possible to exceed the total number of steps.

For each step in stepsInSingleJump, the function calls itself with the updated currentSteps (which is the sum of the current step and the number of steps already taken) and the updated currentCombo (which includes the current step). This continues until the base case is reached, at which point the combinations are returned.

What is git merge and how to undo it

Gurmeet Singh — Sun, 18 Dec 2022 16:41:06 +0000

When you want to combine the changes from one branch into another, you can use the git merge command. For example, suppose you have two branches: "main" and "new-feature". You have been working on "new-feature" for a while and now you want to merge the changes you made into "main". To do this, you can use the following steps:

Switch to the main branch: git checkout main
Merge the changes from new-feature into main: git merge new-feature

Git will automatically try to merge the changes from "new-feature" into "main". If there are no conflicts, the merge will be completed and you will be able to see the changes you made in "new-feature" in the "main" branch.

If there are conflicts, git will not be able to automatically merge the changes and you will have to resolve the conflicts manually. This means that you will have to edit the conflicting files and decide which changes to keep and which to discard. Once you have resolved the conflicts, you can commit the merged changes to complete the merge.

Undo git merge -

There are several ways to undo a git merge, depending on what you want to achieve and in most cases first two will be sufficient. Here are some options:

1) git merge --abort: This command will abort the merge and restore the state of the repository to before the merge was started. This is the most straightforward way to undo a merge, but it will only work if the merge has not been completed and the repository is still in a "merging" state i.e., there was a merge conflict and the changes have not been pushed to a remote repository.

In git, a repository is considered to be in a "merging" state when a merge operation is in progress but has not yet been completed. This typically occurs when you are using the git merge command to combine changes from one branch into another, and git has detected conflicts that need to be resolved.

When git is in the process of merging, it creates a special merge commit that represents the combined changes from the two branches. This commit has two parent commits, one for each branch being merged. However, until the merge conflicts are resolved and the merge commit is finalized, the repository remains in a "merging" state.

2) git reset --hard HEAD~1: This command will discard the changes from the merge and restore the repository to the state it was in before the merge. It will also remove any commits that were added during the merge. This option is useful if you want to completely discard the changes from the merge and start over.

This command works for both cases whether the changes were pushed or not.

However, it's important to keep in mind that using git reset --hard will permanently discard the changes made in the commits that are being removed. This means that the changes will be lost and cannot be recovered. Therefore, it's generally a good idea to use this command with caution and only if you are sure that you want to permanently discard the changes made in the merge commit.

3) git revert <commit_hash>: Alternatively, you can use git revert to undo specific changes from a commit. It will undo the changes made in the specified commit by creating a new commit that reverses the changes. This is a safer option if you are not sure which changes you want to discard, as it preserves the history of the repository.

Good to know -

If there are no conflicts between the branches, Git will automatically create a new commit that merges the changes from the feature branch into the master branch. If there are conflicts, Git will stop the merge and ask you to resolve the conflicts before completing the merge.

You can also use the git merge command with the --no-commit flag, which will perform the merge but not create a new commit. This can be useful if you want to review the changes before committing them to the repository.

It's important to note that a merge creates a new commit in the history of the branch you are merging into. This means that after a merge, the two branches have a common ancestor commit, and any commits on the merged branch are considered to be part of the branch's history.

Flatten a nested object in JS

Gurmeet Singh — Tue, 13 Dec 2022 19:05:19 +0000

When an interviewer wants to test your logical as well as programming capabilities a good-to-go question for them is to ask you to write a function to flatten a given nested object. Such that, an object as given below

{
    "companyName": "Movetoabroad",
    "fieldOfWork": "Immigartaion",
    "website": "http://movetoabroad.com",
    "highlights": {
        "visaSuccessRate": "High",
        "fees": "Free"
    }
};

must become

{
  "companyName": "Movetoabroad",
  "fieldOfWork": "Immigartaion",
  "website": "http://movetoabroad.com",
  "highlights.visaSuccessRate": "High",
  "highlights.fees": "Free"
}

Seems simple. Right? We can just add a check to see if the value of the property is object if yes just iterate over the child object and prepend the parent property name to the child property name before adding it to a new object which contains all the flattened properties.

But in most cases, the interviewer will add a condition here that the object can have an "n" level of nesting. Such that, we can have an object in the form of

{
  "companyName": "Movetoabroad",
  "fieldOfWork": "Immigartaion",
  "website": "http://movetoabroad.com",
  "highlights": {
    "visaSuccessRate": "High",
    "fees": "Free",
    "timings": {
      "weekdays": "9am - 6pm",
      "weekends": "10am - 7pm",
    },
  },
}

which must become

{
  "companyName": "Movetoabroad",
  "fieldOfWork": "Immigartaion",
  "website": "http://movetoabroad.com",
  "highlights.visaSuccessRate": "High",
  "highlights.fees": "Free",
  "highlights.timings.weekdays": "9am - 6pm",
  "highlights.timings.weekends": "10am - 7pm",
}

Now the logic which you thought earlier still applies but since the level of nesting is unknown we have to keep on applying the same logic again and again until the nesting stops. You can think of doing it using a loop but here's where the programming abilities kick in and you must think about using Recursion

One common way to solve this is -

const flattenObj = (obj) => {
  const result = {};
  for (let key in obj) {
    if (typeof obj[key] === "object") {
      const temp = flattenObj(obj[key]);
      for (let prop in temp) {
        result[key + "." + prop] = temp[prop];
      }
    } else {
      result[key] = obj[key];
    }
  }
  return result;
};

Or even better

function flattenObj(obj, res = {}, parentKey = '') {
    for(let key in obj) {
    let modifiedKeyName = parentKey ? `${parentKey}.${key}` : key;
    if(typeof obj[key] == 'object') {
        flattenObj(obj[key], res, modifiedKeyName);
    }else{
        res[modifiedKeyName] = obj[key];
    }
  }
  return res;
}

Disclaimer - This code must be considered only for interview purposes for real-world usage you might need to optimize it more based on the objects you are passing to this function. For instance, if the value of a property is an array then you might need to add another check Array.isArray(obj[key]) along with typeof obj[key] == 'object' because in JS typeof arrays also returns "object".

I used ChatGPT extensively for a day and it just blew my mind

Gurmeet Singh — Sat, 10 Dec 2022 16:42:01 +0000

It has been some days since the official launch of ChatGPT and with it crossing 1 million + users in just 5 days it has been the talk of the town. When I first heard about it I straight away went ahead to try it out. Initially, I just took it as a toy and played with it by asking it to write some articles for me or explain some topics to me in easy language and write some common programming code for me. But that was it I soon left the site thinking it is good and didn't bother much about it as my first instinct was it might have used some existing text from the internet and rephrased it using some basic AI logic as the things which I asked were pretty common.

But as the hype around it is growing with each passing day I decided to revisit the website again. It has been some hours of me seriously working on it to see its capabilities and I can just say one thing.

"The winter of AI is coming, and with it, the end of many jobs as we know them. We must be prepared for this future and adapt to the changing world." - ChatGPT

Here I am going to articulate some of the responses received from ChatGPT with minimum effort and sometimes in just the first try that will help you understand what left me awe-struck as well as fearful at the same time.

Beginner -

I am a front-end developer who is responsible for implementing the visual and interactive elements of a website. The technology which I am working on in my day-to-day life is React.js. So, I decided to spin up the ChatGPT to create something for me in React.js. I still remember when I initially started to work with React one of the tasks I was given was to automatically create a "Table of Contents" for a given article which will allow the user to go to a particular section of the article with ease. I still carry the sense of accomplishment I felt when I was able to do it.

So, I decided to try the same and provided it as a task to ChatGPT.

ME - "code a component in react which acts as a table of content for the given article. It will take all heading tags from the article placed inside a div with a class name of "article-wrapper" and create a list of those headings to act as a table of contents for that article. On clicking on an option in the table of contents user must be scrolled to that position on the article."

And in just two attempts I was able to get the following -

ChatGPT - Here is an example of a table of contents component in React that can be used to create a list of headings from an article and allow the user to navigate to those positions in the article:

import React, { useState, useRef, useEffect } from 'react';

const TableOfContents = () => {
  const articleRef = useRef(null);
  const [headings, setHeadings] = useState([]);

  useEffect(() => {
    // get all heading elements from the article
    const articleHeadings = articleRef.current.querySelectorAll('h1, h2, h3, h4, h5, h6');
    // create an array of heading objects with text and id attributes
    const headingData = Array.from(articleHeadings).map(heading => ({
      text: heading.textContent,
      id: heading.id,
    }));
    // update the state with the heading data
    setHeadings(headingData);
  }, []);

  const handleClick = id => {
    // find the heading element in the article by id
    const headingElement = articleRef.current.querySelector(`#${id}`);
    // scroll to the position of the heading element in the article
    headingElement.scrollIntoView({ behavior: 'smooth' });
  };

  return (
    <div>
      <h3>Table of Contents:</h3>
      <ul>
        {headings.map(heading => (
          <li key={heading.id}>
            <a href="#" onClick={() => handleClick(heading.id)}>
              {heading.text}
            </a>
          </li>
        ))}
      </ul>
      <div className="article-wrapper" ref={articleRef}>
        {/* article content goes here */}
      </div>
    </div>
  );
};

In this component, we use the useRef hook to create a reference to the article element, and the useState hook to store the array of heading data in the component's state. The useEffect hook is used to get the heading elements from the article and create the heading data when the component is mounted. The handleClick method is used to handle clicks on the table of contents links, and scroll to the corresponding heading in the article. Finally, the component renders the table of contents and the article content inside the article-wrapper element.

You can customize this component to suit your needs, such as adding styles or providing options to filter the heading levels that are included in the table of contents.

I am sure that not everyone reading this might relate to the answer but having 8 years of experience in this field can tell you that this is pretty impressive. Given that, I was still not convinced as there are many articles on the internet which have the solution to this. So, I tried to play some more.

Advanced -

Now, I wanted it to generate something for me which might not be easily available on the internet. Maybe a startup idea and ask it to code it for me? But I was not able to come up with one so I decided to ask ChatGPT for an idea :P

ME - give me a startup idea
ChatGPT - How about a platform that connects independent contractors with businesses that need their services? This platform could make it easier for businesses to find and hire skilled professionals, while also helping independent contractors find work and manage their schedules. The platform could also offer tools and resources to help contractors run their businesses more efficiently.

ME - can you be a bit more specific?
ChatGPT - Sure, here's a more specific idea: How about a platform that connects home cooks with people in their local area who are looking for home-cooked meals? The platform could allow home cooks to create profiles showcasing their cooking skills and specialties, and customers could browse these profiles to find a home cook who makes the kind of food they're looking for. The platform could also handle scheduling and payment, making it easy for both cooks and customers to use. This could be a great way for people to enjoy delicious, homemade meals without having to do all the cooking themselves, and it could also help home cooks turn their passion for cooking into a profitable business.

ME - how will we solve the problem of hygiene and make sure that cooking is done with good grade and fresh ingredients ?
ChatGPT - To ensure that the food being cooked is safe and of high quality, the platform could require home cooks to register with the local health department and comply with all relevant food safety regulations. This could include regular inspections of their home kitchens to ensure that they meet the necessary standards for cleanliness and food safety. Additionally, the platform could require home cooks to use only fresh, high-quality ingredients, and it could provide resources and guidance to help them source these ingredients from local farmers and markets. By implementing these measures, the platform could help ensure that the food being cooked is safe and delicious.

ME - and how will we earn from this?
ChatGPT - One way the platform could earn money is by charging home cooks a small fee to register and use the platform. This could help to cover the costs of maintaining the platform and providing resources and support to home cooks. Additionally, the platform could take a small commission on each transaction made through the platform, allowing it to earn a profit from the sale of each meal. This model could allow the platform to earn a steady stream of revenue while also providing a valuable service to both home cooks and customers.

ME - what about logistics?
ChatGPT - Good question! Logistics will be an important consideration for this platform. One way to handle logistics would be to allow customers to pick up the meals they order directly from the home cook's house. This could help to keep costs down and make the platform more accessible to a wider range of people. Alternatively, the platform could offer delivery services, either by partnering with a third-party delivery company or by using its own network of drivers. This could make the platform more convenient for customers, but it would also add to the cost of each transaction. Ultimately, the platform will need to strike the right balance between convenience and cost in order to be successful.

ME - how many people will I need to start this businesS?
ChatGPT - It's difficult to say exactly how many people you will need to start this business, as it will depend on a number of factors, such as the scope of your initial offering, the size of your target market, and the resources you have available. However, it's likely that you will need at least a small team of people to help you get the business off the ground. This could include people with expertise in areas such as product development, marketing, and operations. As the business grows, you may need to add more people to your team to handle the increased demand. It's important to start small and build your team gradually as the need arises.

ME - can you help me write code for this idea?
ChatGPT - I'm sorry, but I am not able to write code. I am a large language model trained by OpenAI, and I can provide general information and advice on a wide range of topics, but I am not able to write code or perform specific technical tasks. If you need help with coding, I would recommend reaching out to a professional software developer or consulting a relevant programming guide or tutorial.

ME - can you suggest a good name for this platform?
ChatGPT - Sure, here are a few potential names for this platform:

"MealConnect"
"KitchenLink"
"HomemadeHQ"
"Plateful"
"FoodFusion"
These are just suggestions, and the right name for your platform will depend on a number of factors, such as your target market, your brand values, and the unique features of your platform. Ultimately, the best name will be one that is memorable, easy to pronounce and spell, and that accurately represents what your platform does.

Pretty amazing. Right? To be honest I really considered leaving my job and creating a startup with this idea for a moment but then I recalled the amount of EMI's I have to pay :P

Human level -

One of the problems which I came across since lockdown was to keep a track of the time I spent in meetings. So, last weekend I decided to create a chrome extension which will automatically track the time I spend on calls and show me a report of the same.

I spent last weekend writing the chrome extension from scratch and still the reporting part is pending... (God please give me the power to complete the project and not let it go to my infinite list of side projects which I started but never completed). So, I decided to let ChatGPT create the same extension for me.

This is what we have after four attempts. Look how clearly it lists down the steps such that someone who has never created an extension or even written any code is able to follow up and actually create it. As soon as I had the code I noticed something it was not recording time automatically. So, I asked it to correct it and it did without breaking a sweat. I did not run the extension to check it out but I could clearly see the effort of my weekend's worth of work in front of me in just a couple of minutes and to be honest, this sank my heart a bit. I was both amazed and shaken by this. Because I knew no such open-source extension existed as I had done thorough research before I started to create one. Suddenly, I see a dark tunnel with no light as I never thought that the work I did could be done so easily by some bot. With this chain of thoughts, I continued...

God level -

You might have noted that the above conversation is provided as screenshots instead of text as the first two. Reason - As soon I completed the chrome extension I wanted to share it with you all in the form of a blog but the first thing that came to my mind was how shall I share all these chats as text or screenshots?
Then it clicked on me why not use ChatGPT to create another chrome extension which will provide me with the ability to export all chat that I have with ChatGPT as screenshots or JSON?

ME - code a chrome extension which helps me save this chat as JSON or a screenshot on click of a button

And within a minute I had the code of the extension in front of my eyes. I was not able to believe what I was seeing and I just thought to myself that this cannot be possible it is like the ability to get what you want in an instant. So, this time I decided to test if it will actually work and to be honest I badly wanted it to fail and it did.

As soon as I copied all code and ran it I got an error. I just copied the error on ChatGPT and it told me how to fix it. I received a couple of errors which it was easily able to tell how to fix apart from one which was a minor one so I gave it the benefit of doubt and fixed it myself. And just like that in less than 5 minutes I have a chrome extension up and running in my browser from which the above screenshots have been taken.

Obviously, it has some drawbacks at the moment like not being able to take a screenshot of a complete page in one go but let me tell you it could have been easily done with my next prompt and I was so sure of it that I did not even bother trying. Experiencing all this has already made me think, rethink and trying to comprehend what I just saw.

After much thought my take on this is as simple as to embrace this change that is upon us and start using AI to improve our efficiency by 100X. AI must be a tool in our arsenal to improve what we do and not fear it because both AI and Humans are here to stay.

Sort a binary array in Javascript without using extra spaces and having O(n) time complexity

Gurmeet Singh — Thu, 08 Dec 2022 17:16:10 +0000

One of the basic questions which are generally asked in technical interviews is to sort a given array which contains only 0 and 1 as elements without using another array and having a time complexity of O(n)

Example -
Input: [1, 0, 1, 0, 1, 0, 1, 0]
Output: [0, 0, 0, 0, 1, 1, 1, 1]

After reading O(n) the first thing that would come to mind is quick sort but having a binary array as an input makes the problem simpler for us. Let me share 2 methods to do it. But wouldn't you like to think of a pseudo-code before checking the solutions below?

Method 1 -

We count the number of zeros and ones in the array and then repopulate the array based on the count.

const sortBinaryArr = (arr) => {
  let zerosCount = 0;
  let arrLen = arr.length;

  // Iterate over the array once to get the count of the number of zeros preset
  for (let index = 0; index < arrLen; index++) {
    if (arr[index] === 0) {
      ++zerosCount;
    }
  }

  // Iterate over the array till the number of zeros we got above and set all array elements up to this index to zero
  for (let index = 0; index < zerosCount; index++) {
    arr[index] = 0;
  }

  // Iterate over the remaining items and set them to one
  for (let index = zerosCount; index < arrLen; index++) {
    arr[index] = 1;
  }

  return arr;
};

Technically we are iterating over the array twice hence these operations combined are O(2n). Therefore the function sortBinaryArr() is an O(2 * n) operation, which is equivalent to O(n).

Method 2 -

A more optimized method is as below.

const sortBinaryArr = (arr) => {
  let pointer = -1;
  const arrLen = arr.length;
  for (let index = 0; index < arrLen; index++) {
    // if the number is smaller than 1 then swap it with the number at the pointer index
    if (arr[index] < 1) {
      pointer++;
      const temp = arr[pointer];
      arr[pointer] = arr[index];
      arr[index] = temp;
    }
  }

  return arr;
};

The algorithm is pretty simple and self-explanatory. Here, we make use of a variable which acts as a pointer and helps us to keep track of zeros and ones while we iterate over the array.

Such that,

If the element is 0 then we increment the pointer by 1 and swap the current element with the element at the pointer position.
If the element is 1 we continue without any action.

Can you think of a better solution? Comment down your solution...

Undo git add command

Gurmeet Singh — Thu, 08 Dec 2022 13:30:00 +0000

For adding any files for the commit we add them using git add . for adding all modified files or git add ${fileName} for adding one file at a time.

In some situations, you might want to undo this git add command. You can use the following command to do so

git reset

This command can be used to unstage all files that were staged for the commit.

Whereas if you want to unstage only one particular file you can use the following command

git restore --staged ${fileName}

Remove trailing slash from URLs in Next.Js

Gurmeet Singh — Wed, 07 Dec 2022 14:30:00 +0000

Websites which are concerned with SEO usually know that having the URLs like following -
http://movetoabroad.com/about and http://movetoabroad.com/about/ are treated differently by the crawlers.
If you look closely the only difference between the URLs is just the trailing slash. Having these types of URLs creates an issue of duplicate content as crawlers find it pretty difficult to determine the original source.

Here check out this twitter thread

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

Does it make sense now why your application needs to get rid of trailing slashes?

If you are working in Next.js then there are two ways to fix this

Method 1 -

Well the Next.Js team was aware of this which is why they have an inbuilt provision to handle this you can read about it more here

The idea is to Open next.config.js and add the trailingSlash config:

module.exports = {
  trailingSlash: true,
}

That's it. You are good to go.

Method 2 -

Method 1 discussed above somehow doesn't work at all times or if you are still on an older version of Next.Js. You can see the internet full of discussion around it. So, another method which you can consider especially if you are using a custom server to run the Next.Js application is described below

server.get("*", (req, res, next) => {
  try {
    if (
      req.path.endsWith("/") &&
      req.path.length > 1
    ) {
      let query = req.url.slice(req.path.length);
      // if req.path contains only slashes it means user is trying to access the home page. Check the same using regex and if true redirect him to home page.
      if (/^[\/]+$/.test(req.path)) {
        res.redirect(301, "/" + query);
      } else {
        res.redirect(301, req.path.replace(/\/+$/, "") + query);
      }
    } else {
      next();
    }
  } catch (error) {
    console.log(`Error in redirection ${error}`);
    next();
  }
});

This piece of code simply takes requests and it will check if the URL that the user has accessed ends with a trailing slash or not. If not it will let it continue as it would have without this code. But, if there is a trailing slash we do the following -

Save all query parameters. Such that if the user tries to access http://movetoabroad.com/about/?utmSource=Wikipedia we want him to be redirected to http://movetoabroad.com/about?utmSource=Wikipedia which make sure that the query params passed are not affected in any way.
We then remove all trailing slashes before the query parameters using regex because who is stopping users from trying to access http://movetoabroad.com/about///? Our regular expression makes sure of that.
But we have another check that if the user is trying to access home page of the site in that case we will redirect him to home page. Such that http://movetoabroad.com/// redirect to http://movetoabroad.com but you might notice that we are not using the regex to remove all slashes but have added an extra check this is because the second param of res.redirect cannot be empty and if we remove all slashes using req.path.replace(/\/+$/, "") we have an empty sting which will lead to error so we redirect it with a single slash instead using res.redirect(301, "/");
Once we have the URL without trailing slashes and our query params received we just merge them to create the updated URL without trailing slashes and permanent redirect (301) on it.