Understanding insertion sort algorithm

Marcos Nikel — Mon, 05 Jun 2023 14:50:05 +0000

In our day-to-day JavaScript programming, when we use the .sort() method, there's a whole algorithm running behind the scenes. However, it's unlikely that Insertion Sort is the algorithm being used. But why is that?

There are various sorting algorithms available, such as Insertion Sort, Quick Sort, Merge Sort, Selection Sort, Bubble Sort, and many others. Each of them has different time and space complexities.

Insertion Sort happens to be one of the less efficient ones, but why?

In terms of complexity, Insertion Sort has a time complexity of O(n²) in most cases and a space complexity of O(1), which is good. However, considering a time complexity of this magnitude, there are sorting algorithms that achieve a time complexity of O(n log n), which is better than O(n²).

So, how does this algorithm work?

Initially, we consider the first element of the list as a sorted list with a single element.
Next, we move on to the next element in the unsorted list.
We compare the current element with the elements in the sorted list, from right to left, until we find the correct position to insert the element.
During the comparison, if an element in the sorted list is greater than the current element, it is shifted one position to the right to make space for the insertion.
We repeat steps 3 and 4 until all elements in the unsorted list are inserted into the sorted part of the list.

This process continues until all elements are in the sorted list, resulting in a completely ordered list. Insertion Sort is an efficient sorting algorithm for small lists or partially sorted lists. However, its performance significantly deteriorates for very large lists.

Below, I provide an example implementation of this algorithm, including an auxiliary function called swap() responsible for swapping elements.

Contact form with react-hook-form and emailjs

Marcos Nikel — Fri, 02 Jun 2023 02:02:36 +0000

What I Wanted to Do

Today, I started developing my portfolio, and one thing I really wanted to do was create a contact form through which people could reach out to me via email. Since I had never done this before, I found myself wondering, "How can I do this?"

The Solution

Then, I remembered a library that I had been eager to learn, react-hook-form. I thought it was the perfect opportunity to learn it because it provides amazing control over form data. However, I had no idea how to send the data to my email. After conducting a brief search, I came across various possibilities, but one that caught my eye was the emailjs library. It was user-friendly and only required a public key, an email template ID, and a service ID from emailjs. Additionally, I had to make some minor configurations in VSCode. In this article, I will provide an example of how to configure emailjs.

-> In the image above, you can see that I call the register method from the hook form, which is responsible for keeping track of the form data. In the next image, you will see that I call the same method in my inputs to assign a name to the input.

-> The handleSubmit method, also from hook form, handles the form submission. We pass our other function, onSubmit, to this method so that it can be executed. The reset function is used to reset the input's state, setting the values back to empty strings (" ").

In the onSubmit function, you need to set the template to send to the emailjs email template mentioned earlier. The keys from, name, fromEmail, and message are important, as you will see shortly.

We call emailjs, passing the SERVICE_ID and TEMPLATE_ID that you select in your emailjs dashboard. I create two variables to store the values for me, and the third parameter represents your template parameters, which I define in the onSubmit function.

In the image below, you can see the register method for the inputs mentioned earlier, as well as the form validations. That's pretty much all you need to do in your code.

The last important thing is to ensure that the variables' names in your onSubmit function match the keys in the object within the email template on the emailjs dashboard, as shown below:

As you can see, I used the same names for my keys in the object. This is how emailjs recognizes the data when it is sent to the emailjs API.

That's it for today, guys! You can learn more about react-hook-form and emailjs in their respective documentation. I will provide the links below:

emailjs: https://www.emailjs.com/
react-hook-form: https://react-hook-form.com/

DEV Community: Marcos Nikel

Understanding insertion sort algorithm

Contact form with react-hook-form and emailjs

What I Wanted to Do

The Solution