# Implementing a Max Heap in JavaScript

Last week I wrote about implementing quicksort in JavaScript, the next sorting algorithm I would like to cover is heap sort. However, in order to do so, we need to understand the heap data structure. A heap is a tree based structure. Specifically we will be looking at a max heap, which is a form of binary heap that satisfies the heap property. The heap property states that every child node will be less than (or greater than, in the case of a min heap) its parent node. This means that the root node will always be the maximum element in the heap, and each node thereafter will have at most 2 child nodes. …

# Implementing Quicksort in JavaScript

Last week I covered implementing merge sort in JavaScript. This week I’m going to look at quicksort, which is another commonly used sorting algorithm. Like merge sort, quicksort is another comparison sort algorithm that takes a divide and concur approach.

# Step by Step Example

The steps to perform quicksort on an array are as follows:

• Pick a an element from the array, called the pivot.
• Reorder the array so that the elements less than the pivot come before it, and the elements greater than come after. This is called partitioning as now the array is in two partitions.
• Recursively call quicksort on the two partitions, as long as the partitions contain at least 1 element (the base case). …

# Implementing Merge Sort in JavaScript

Merge sort is a sorting algorithm that takes a divide and conquer approach. It is the fastest of the sorting algorithms that I’ve covered so far, with the trade off being that it takes more space. When you use JavaScript’s `.sort()` it may in fact be calling merge sort under the hood. So if you’re not familiar with recursion, you may wish to look into that first.

# Expected result

Sort in ascending order
Input: [4, 2, 5, 1, 3, 6]
Output: [1, 2, 3, 4, 5, 6]

# Splitting the Array

Merge sort’s approach is quite different than many of the algorithms we’ve already looked at. The first thing it is going to do is break the array down into 1 element arrays. …

# Implementing a Linked List in ES6 JavaScript

A linked list is a linear data structure. Data structure is a computer science term that is used to refer to a method of data storage, organization, and management. Some data structures you may already be familiar with in JavaScript are arrays and objects. Similar to different algorithms, different data structures have unique strengths, weaknesses, and use cases. Let’s take a look at implementing a linked list using JavaScript ES6 classes.

# What is a Linked List?

A linked list is a data structure composed of nodes. Each node has at least 2 components, the data that it holds and a reference to the next node in the list (called a pointer). The first node in a linked list is called the head, the last node in a linked list is called the tail. There are several kinds of linked lists. Singly linked lists only contain a pointer to the node after them, doubly linked lists contain a pointer to the node before and after them, and in circular linked lists the tail points to a node earlier in the list (generally the head) as the following node, which creates a loop, or circle. …

# JavaScript Insertion Sort

Last week I wrote a blog about selection sort. Let’s continue on our sorting algorithm journey and discuss insertion sort. Conceptually I find insertion sort to be similar to selection sort. However, rather than finding the minimum in the unsorted section of the array, we will search through the already sorted elements at the beginning of the array to find out where to place each subsequent element. For example our first two elements are 3 and 1, we will swap them so they are in ascending order (1 followed by 3). After that if we had a 2, we would put it between the 1 and the 3. …

# JavaScript Selection Sort

## Let’s sort it out

Last week I wrote a blog about bubble sort. Continuing on my journey of learning sorting algorithms, let’s take the next step and look at selection sort.

Unlike bubble sort, which compares adjacent elements, selection sort works by looping through the array, finding the smallest (or largest depending on if you’re sorting in ascending or descending order) element, and moving it to the beginning of the array. From there it loops through every element excluding the elements it has already set in place until it has gone through the entire array.

# Step by Step Example

## Expected result

Sort in ascending order
Input: [4, 2, 5, 1, 3, 6]
Output: [1, 2, 3, 4, 5…

# JavaScript Bubble Sort

Bubble sort (sometimes called sinking sort) is a sorting algorithm that works by comparing adjacent elements and swapping them if they are not in the correct order (ascending or descending). It compares two elements at a time and makes multiple passes until every element is sorted. It does not scale well with large lists, so bubble sort is not seen in real world use but it’s simple implementation makes it a good introduction to sorting algorithms.

# Step by Step Example

## Expected result

Sort in ascending order
Input: [4, 2, 5, 1, 3, 6]
Output: [1, 2, 3, 4, 5, 6]

First Iteration
compare first element to second element, swap since 4 > 2
[4, 2, 5, 1, 3, 6] → [2, 4, 5, 1, 3, 6]
compare second element to third element, don’t swap since 4 < 5
[2, 4, 5, 1, 3, 6] → [2, 4, 5, 1, 3, 6]
compare third element to fourth element, swap since 5 > 3
[2, 4, 5, 1, 3, 6] → [2, 4, 1, 5, 3, 6]
compare fourth element to fifth element, swap since 5 > 3
[2, 4, 1, 5, 3, 6] → [2, 4, 1, 3, 5, 6]
compare fifth element to sixth element, don’t swap since 5 < 6
[2, 4, 1, 3, 5, 6] → [2, 4, 1, 3, 5

# Installing Rust on Windows and Visual Studio Code with WSL

It was suggested to me to look into the Rust programming language after I expressed interest in learning more about systems concepts. Installing Rust was simple but there were a couple of snags along the way. That’s why I’ve decided to write a short blog about the process I had to go through to get Rust working on VS Code with WSL on Windows 10.

# Installing Rust

## First Step

Run `curl --proto '=https' --tlsv1.2 https://sh.rustup.rs -sSf | sh` in the command line. I ran this in the user directory in VS Code, which is where it defaults to when I open a terminal in a new window. …

# Client Side Routing on GitHub Pages with Create React App

So in my last blog post I talked about incorporating EmailJS in my portfolio website. While I had some questions, the process of doing that was actually fairly easy. On the other hand, when I deployed to GitHub Pages that’s when things got messy. The process of actually deploying was about as seamless and simple as it gets, but once I deployed I realized my client side routing was not working, and it took me a while to figure out how to fix it.

# Deploying to GitHub Pages

If you already know how to deploy an application bootstrapped with Create React App to GitHub Pages, I suggest you skip to the next section about fixing your client side routing. …

# EmailJS with Create React App

So I’ve finally got my portfolio finished! I decided to use Create React App to get up and running and a friend told me about EmailJS, which would allow people to send me an email directly from my portfolio site. Luckily for me both of these things provide awesome documentation so getting started was a breeze.

# Create React App

What is Create React App? Create React App(CRA) is a tool made by Facebook developers to create a boilerplate React Single Page Application(SPA). This means that you don’t have to configure anything and you can just start working on your code.

## Let’s Get Started

If you already know how to get a React app running using Create React App you can skip to the next section about EmailJS. I’m going to be using `yarn` for this tutorial, as it’s what I use, but `npm` works too! So first things first, the Create React App docs recommend uninstalling if you’ve previously had it installed globally so you would run: `yarn global remove create-react-app`. Then all you have to do is run: `yarn create react-app my-app`. Where `my-app` is replaced by your application name. …