DEV Community: Kevin Kononenko

Merge Sort Explained By Trying To Become A Tennis Champion

Kevin Kononenko — Mon, 10 Feb 2020 04:17:27 +0000

“Merge sort” is popular algorithm for sorting an array from smallest to largest. It is often compared to selection sort, insertion sort, bubble sort and many others.

However, as I searched the internet for a simple explanation of how merge sort works… I could not find a guide that made it incredibly simple.

Sure, there is a beautiful visualization over at VisuAlgo, and FreeCodeCamp has a comprehensive text explanation.

But, I still found myself staring at code blocks for a long time and wondering, “What exactly is happening in this line?”

So, this guide will give an incredibly simple explanation of how merge sort actually works. It is kind of like a series of tennis tournaments.

In order to understand this guide, you just need to know the basics of recursion. Let’s get started!

The Basics of Merge Sort

One of the fundamental ideas of merge sort, like all other basic JavaScript algorithms, is that you can only sort an array by comparing two elements at a time and finding the larger element.

So, we need a way to run those comparisons as efficiently as possible.

Let’s imagine that we have an array of 8 numbers that we need to sort from smallest to largest:

[4,6,7,2,1,10,9,3]

Rather than thinking of these as numbers, let’s think of them as skill levels of tennis players, on a scale of 1-10. It’s our job to determine, “Who is the best tennis player of the group?”

So, using merge sort, we need to rank this group from lowest skill to highest skill. We can do that by running a series of tennis matches and determining the winner of each one.

But, in real tennis competitions, players are not forced to travel across the country to compete in one massive tournament. Instead, they must win a series of smaller tournaments before they can compete for the prize of national champion.

Let’s imagine that we are trying to find the best amateur player in the United States.

We can group these players into 4 regions: West, Mountain, Central, and East. It would look like this:

The elements at index 0 and 1 in the array in purple are in the West region… you get the idea.

We will start with 4 regional tournaments, and then run competitions between regional winners to determine a national champion.

In other words, we will consistently find the “better” of two tennis players until we reach the national level. At the national level, the “better” player is really the “best” in the United States!

Setting Up The Merge Sort Algorithm

Okay, I admittedly chose 8 players because it is easy to show within a blog post. In order for the algorithm to work properly, it must be able to handle all arrays with at least 2 elements.

And, it needs to handle cases where there is an odd number of elements in the array ie 9 elements.

There are really two parts of merge sort:

Dividing the array of all tennis players into regional tournaments
Running the tennis matches at a successively higher level until we are able to determine a national champion.

Here’s why we need recursion: we have no idea how many matches need to be run until we know the size of the array. This algorithm must be able to handle 8 tennis players… or 350.

We will cover the recursion part later. Now, let’s focus on part 2, the “competition” function that allows us to compare two tennis players and resort them based on their skill level. We will assume the better player wins every time.

This function can be run an infinite number of times, depending on the size of the player pool.

This function should take two arrays, and combine them into one properly sorted array, from smallest to largest. It should do this via “competitions”, or 1 on 1 comparisons.

Here’s what this looks like for two arrays with two elements apiece. This might be the tournament that happens AFTER the regional tournaments have happened.

Here’s a couple key notes about the GIF above:

We can only move one player at a time. This is because we only know if one player is better than the one we are facing. We can’t determine the absolute position of multiple players at once.
One side of the tournament could have all the best players. Therefore, we need to be able to handle the case where only one side of the array has players remaining.

Here’s what the code looks like:

const tournament = (left, right) => {
  var rankings = [];
  while(left.length || right.length) {
    if(left.length && right.length) {
      if(left[0] < right[0]) {
        rankings.push(left.shift())
      } else {
        rankings.push(right.shift())
      }
    } else if(left.length) {
        rankings.push(left.shift())
      } else {
        rankings.push(right.shift())
      }
    }
  return rankings;
}

That’s a lot at once. Here’s a summary:

Line 3: We start iterating through the players on both sides of the bracket. The number of iterations is determined by the longer array.
Lines 4-10: We “compete” with the first element in each array. When we find a loser, we use the shift() method to remove the player from the tournament and add it to the next lowest spot in the rankings array.
Last Line: We return the rankings array with the players ranked from worst to best.

Here’s an animated version of that code:

Okay, now let’s move back to the first function to see how we split the players up into tournaments at the regional level and then combine them back into a national tournament.

Using Recursion Within Merge Sort

Okay, we now have the function that allows us to run “competitions”, but we need a function to split up the array and put it back together.

Before we can run any competitions, we need to organize the array into “regions” before we can run the first 1v1 competition.

Here’s how we might go from 8 players of various skill levels to four 1v1 competitions:

There are 7 examples of an array being split into a smaller array or a single element. We cannot hardcode this number because if there were 16 players, there would be 15 examples of an array being split.

Remember: in 1v1 comparisons, we can only tell which player is “better” than another. That’s why we need to break this down into 1v1 comparisons- so that all the smaller arrays are properly sorted before they are compared later.

And, afterwards, we will reassemble the array after sorting the elements at every layer.

Here's how the array will be split up into a series of 1v1 competitions:

And here's how we will "reassemble" the array to find the ranking from smallest to largest:

See the parallels between the array splitting and then reassembling? This is a great hint that we will need recursion.

I will focus in on the “left” side of the array, or the first half. Here’s how we can build a call stack that will allow us to sort the array.

Every time we split the array in half, we add a call to the call stack that references the previous call. At the end, we can run the tournament() function at each level to sort each smaller array before mergining them.

Here’s what the code looks like:

const findWinner = (players) => {
  if(players.length <= 1) return players;
  const middle = players.length / 2 ;
  const left = players.slice(0, middle);
  const right = players.slice(middle, players.length);
  return tournament(findWinner(left), findWinner(right));
}

let players = [4,6,7,2,1,10,9,3];
findWinner(players);

Lines 3-5 allow us to define a midpoint in the array, and split the array down the midpoint. When we do this recursively, we shrink the array until it is a single element.

The most important code is in lines 2 and 6.

In line 2, we handle the case where the array has been shrunken to 1 element. This tells us that the recursion should stop, and we can run the lowest-level, regional tournament.

In line 6, we define that in each call, we will run the tournament() function on the sorted array from the previous call (or a 1v1 matchup, if it is the lowest level)

Here’s what this looks like:

In the example above, we have gotten to the level of 1v1 in the “West” and “Mountain” region. So, we can start at the top of the call stack and find the top player by the time we get to the end of the call stack using the tournament() function multiple times.

Get The Latest Tutorials

Did you enjoy this guide? Get my latest visual explanations of HTML, CSS and JavaScript topics on the CodeAnalogies blog.

Recursion and the Call Stack Explained By Reading A Book

Kevin Kononenko — Wed, 22 Jan 2020 02:14:19 +0000

Recursion is one of the most exciting principles of all programming languages.

A non-recursive function (in other words, the functions that you have used in the past) will run once every time it is called, and output via a return statement.

However, a recursive function can be called once and then call itself an undetermined number of times before combining the output of all the function calls in one return statement.

It kind of looks like this.

Static version:

Dynamic version:

The idea that a single function can be called one to infinity times via a single statement is what makes it so exciting!

At the same time, it is difficult to think of a real-world analogy to this situation. And it gets especially difficult once we discuss the call stack , which we will cover later.

Some have suggested a series of infinite boxes:

Image Cred: Grokking Algorithm

Others have suggested the imagery of “Russian nesting dolls”:

However, this is also unhelpful when understanding the call stack.

So, in this tutorial, we will show two popular examples of recursion, and build a visual language for understanding the function and the call stack , which determines how to make sense of the many function calls in a row.

Before continuing with this tutorial, you should have a firm understanding of functions in JavaScript. Check out this guide to arrow functions to learn more.

Example 1- Factorials

Factorials are the most popular example of recursion.

You might be familiar with factorials from algebra class.

They are expressed like: 3!

And that notation evaluates to 3*2*1, or 6.

We could express this as a “for” loop where we update a variable outside the loop:

let factorial = 4;
let result = 1;

for (i=factorial; i>= 1; i--){
    result = result*i;
}

But, here we will use recursion instead. Rather than have a loop that updates a variable outside of its scope, we can use recursion with a function and have n-1 calls, where n is the factorial we want to find.

I will show the code first, and then we can evaluate how it works.

let getFactorial = (num) => {
  if (num == 1)
    return 1;
  else
    return num * getFactorial(num-1);
}

getFactorial(4);
// 24

Woah! This accomplishes the same thing as the code block above.

But, if you look at line 5, you can see that the return statement includes a reference to the function itself.

So… when does this function return a final value, exactly? How do we link the 4 calls of the function together to return the value of 24?

This is where the call stack becomes useful. It determines the rules for the order that these function calls will return.

But, now we are stacking two concepts on top of each other: recursion and call stack. That’s a lot at once.

In order to visualize the call stack, let’s think of a stack that builds from left to right. Every time a block gets added, it is added to the left side of the stack and pushes the other blocks to the right.

So, as we go through this recursive function, we generate a stack like this:

The call stack is being generated at the bottom of the screen throughout the GIF above. At the end, we are left with 1*2*3*4 which results in 24.

The call stack is composed of 4 function calls, and none of them run until the function returns 1. They sit on the stack until the last value is added, in this case 1.

This is because each of the first 3 calls includes a reference to the next call on the stack!

So, when num=4, the function returns 4*getFactorial(3). Of course, that cannot actually return a value until we know the value of getFactorial(3). That’s why we need a call stack!

So, recursion allows a function to be called an indefinite number of times in a row AND it updates a call stack, which returns a value after the final call has been run.

The call stack updates from left to right, and then you can read all the calls in the order they are resolved. Most recent is resolved first, first call resolved last.

However, our GIF above did not do a good job of showing this relationship between each call. So, here’s an updated version that shows how all the calls are connected via the return statement:

Example 2- Splitting a String

In the example above, we used a mathematical example that resembled a question from algebra class.

This works, but there are also plenty of examples of recursion that go beyond math. In this example, we will show how you can use recursion to manipulate a string.

Here’s the challenge: Reverse a string.

In other words, return a string with the letters of an input string in the opposite order.

You can also do this with a “for” loop, but we will use recursion in this example.

Let’s think about how we should reverse the string “cat”.

Every time we run a function call, we need to isolate the first or last letter of the string, and then chop off a letter from the string. When we run the function again, we should again grab the first or last letter.

At the end, the call stack will allow us to return the letters in the correct order.

Here’s the code:

let testStr = 'cat';

let revStr = (str) => {
  if (str.length == 0)
    return '';
  else
    return revStr(str.substr(1)) + str[0];
};

revStr(testStr);
// 'tac'

Okay. Let’s dig in, just like we did above.

Again, although the GIF above makes it look easy, we need to dig deeper into the final return statement if we want to truly understand these function calls.

There is one more important difference in this example compared to the one above- we are doing string concatenation rather than multiplication.

Therefore, the order of the strings in that return statement matters quite a bit, because it determines which order we will use for concatenation.

Since this is not a series of multiplication problems, the call stack is a little easier to understand. Here is a visual:

This is why the order of the strings matters so much- as we build the call stack in the GIF above, there is a specific order of the recursive function call and the string fragment (str[0]).

As we run all the calls in the stack, this order allows us to rebuild the string in the reverse order.

Get The Latest Tutorials

Did you enjoy this tutorial? Check out the CodeAnalogies blog to get the latest visual web development tutorials.

Bubble Sort Algorithm Explained By Picking Teams At Recess

Kevin Kononenko — Wed, 15 Jan 2020 02:43:11 +0000

There is a common problem in all coding languages around learning algorithms.

The number of lines of code does not match up with the complexity of the code. It also does not reflect the amount of mental simulation you need to do in order to understand the code!

Here’s what I mean- let’s say that you have a simple 5-10 line algorithm (like bubble sort). This algorithm can be wrapped in a function and then used with pretty much any array.

But, since it is so short, you might assume that it is relatively simple to understand. After all, experienced programmers can read it once and then quickly recognize a simple sorting algorithm.

However, every newbie will read the code, and by line 3, they will realize that it is MUCH more complicated than they anticipated.

In this guide, we will talk about how to understand the bubble sort algorithm, and get around the cognitive traps that make it so difficult to understand.

First of all, let’s get a quick definition out of the way: an algorithm is comprised of multiple lines of code that achieve a specific task.

It’s a pretty wide-ranging definition.

In this example, the bubble sort algorithm is meant to sort a series of elements in an array from smallest to largest.

We are going to do a line-by-line breakdown of bubble sort that uses space and motion to explain what is happening in each line. Your brain uses space and motion to understand the relationship between multiple objects.

Here’s a real-world scenario that you might be familiar with- you and your friends want to play soccer at recess. So, you have to pick teams before you get started.

Bubble sort helps you answer the question:

“Who should be picked first…second…third… etc. out of all the players?”

It looks like this:

So, let’s re-rank these players using bubble sort! Players are ranked on a 1-10 scale.

The Basic Setup of Bubble Sort

Here’s the array that we will use in this example:

let players = [4, 6, 3, 9, 6, 2, 1, 10, 4, 5];

We need to reorder this array from smallest to largest. So, if we want to get the player ranked a “10” into the last position in the array, here is what that would look like:

The player at index 7 in the array needs to move 2 spots to get to index 9, the last element.

So, there are 2 key questions:

How do we move elements through the array?
How do we reorder the elements correctly as they are moving?

As for “moving” elements through the array, we must iterate through the entire array to move elements. We can do this with:

A “for” loop
A “do/while” loop

In this example, I will use a “for” loop. Then, as we are moving elements, we will need to decide how far to move each element within the array.

We can create comparisons via “if” statements. So, every time we move an element in the array, we must use an “if” statement to see if it should be moved (and how far it should be moved)

So, here’s an animated version of how the player with a rating of 10 goes from index 7 to index 9:

When the index is 6, we compare the player at index 6 to index 7. Since 1 < 10, we do not change the order.
When the index is 7, we compare the player at index 7 to index 8. Since 10 > 4, we move the element in index 7 back to index 8.
When the index is 8, we compare the player at index 8 to index 9. Since 10 > 5, we move the element in index 8 back to index 9.

That’s an example of one element that we need to move. Now let’s see how to take this action on every element with bubble sort.

Turning it into an Algorithm

Now we need to think about how to convert this to a scalable algorithm that will work on any array of numbers.

As shown above, we will need to iterate through the array, so let’s start off with a “for” loop. We will create a function called bubbleSort that takes an array as an argument.

let bubbleSort = (arr) => {
  let length = arr.length
  for (let i=0; i < length; i++) {
     // rest of function goes here
  }
}
bubbleSort (players)

There is one important fact that will define the rest of this algorithm: we can only move elements through the array by comparing the element to a single other element in the array.

If it was possible to have some sort of “memory”, we would be able to reorder these elements in one complete iteration through the array. But we do not have any “memory”, so we will need to compare elements one by one.

Here’s what one iteration through the array would look like. We still haven’t written the logic to make it work, that comes next:

There is a big issue: when we get to the end of the array, it is not properly sorted! Only the best player has achieved the highest rank. In the rest of the array, values are still out of order.

In fact, since we can only move elements one by one, we will need to iterate through the array up to the length of the array. In this case, that means we may need to iterate through 10 times! That means we will need nested “for” loops.

Finishing Bubble Sort

Okay, so now we need to add a second “for” loop within the first “for” loop. This is where we need to write the “swapping” logic.

Let’s figure out the swapping logic. We need to compare two elements: the element with the current index. and the next element. So, the element with the current index + 1. If the current element is bigger, we will flip the positions.

The “if” statement is pretty simple:

if (arr[index] > arr[index+1])

But, beyond that, we need to store the current index in a separate variable if the swap is going to happen.

Remember this example? When the player with a “10” rating goes below the other elements, it is being stored in a variable.

Here’s what that code looks like:

if (arr[index] > arr[index+1]){
  let holder = arr[index];
  arr[index] = arr[index+1]
  arr[index+1] = holder;
}

In the GIF above, the holder variable is updated twice since the top-rated moves by two positions.

One last thing before we combine the two code blocks: After every iteration, we are ensuring that the end of the array becomes a queue of the top-rated players. That means we do not need to continue to iterate through those elements, so the number of iterations should shrink each time.

Here’s the final code:

let bubbleSort = (arr) => {
  let length = arr.length
  for (let i=0; i < length; i++) {
    for (let j=0; j < (length-i) - 1; j++) {
      if (arr[index] > arr[index+1]){
        let holder = arr[index];
        arr[index] = arr[index+1]
        arr[index+1] = holder;
      }
    }
  }
}

bubbleSort (players)

In the second “for” loop, we ensure that we use “length-1” for the initial number of iterations, because we know that the last element in the first iteration of that loop will be the highest value.

Here’s an animation:

Get More Tutorials

Did you enjoy this tutorial? Check out the CodeAnalogies blog to get my latest tutorials on web development topics.

Docker Containers Explained by Renting Office Space

Kevin Kononenko — Tue, 12 Nov 2019 04:53:17 +0000

In the last 15 years, it has become exponentially easier to deploy and manage web applications.

First, services like Amazon Web Services allowed you to easily rent a portion of a server via virtual machines. Rather than, you know, buying the whole server and running it from your closet.

And now, you can use services like Docker, which use containers to make it even cheaper and easier to manage dynamic web apps.

But, new web developers often get the two underlying technologies (virtual machines and containers) mixed up. Although they both make it much easier to deploy web applications, they have some significant differences.

In fact, it’s kind of like the difference between renting your own office space and renting coworking space (using a company like WeWork). So, this tutorial will use the office example to show how they are different.

In order to understand this tutorial, you must first understand the concept of AWS and virtual machines. Check out my separate guide to AWS if you need to review that first.

Now, imagine that you are the owner of a small software company (5 employees) and you are looking for office space.

The History of Office Space and Servers

Let’s rewind 20 years to the year 2000. If you were searching for office space as a small software startup, your options were likely very limited and cost prohibitive. You could:

Buy a small office in a strip mall (or something like that)
Sign a multiyear lease with a significant upfront payment

You would face similar difficulty with getting your product online. You would need to buy an entire server, store it somewhere, and make sure it stayed online 24/7. Very inefficient.

But, over the last 20 years, your choices for renting office space have changed! As tech startups became more popular, you could rent a portion of an office on a one year lease, or even a month-to-month lease.

And, as coworking spaces became trendy in the 2010s, you could just rent a desk or a closed room within a space shared by many companies at once!

At the same time, this was also creating a different relationship between the office building itself, and the team of people required to run the building.

When you purchased the entire office at once, you needed to also manage all the services needed to run the space- snacks, cleaning, furniture etc. If the physical space is like hardware , the office services are like software. And the office manager is the operating system (OS), since they determine how the office works.

But, as we have made office space more accessible, we have also greatly increased the complexity of office services. In other words, there are a greater number of operating systems that must work together.

For example, let’s say your company begins to rent a floor of a larger office building. Now, there must be a general office coordinator to manage all the floors, and you must have your own office coordinator to manage the services for your floor!

Okay, let’s be honest, it’s a small company so that means the CEO is probably the office coordinator for their floor.

Now, each CEO needs to figure out the operating system for their office- which snacks, when it will get cleaned, and any furniture that is needed.

It’s a heck of a lot better than needing to buy real estate, at least.

The Difference Between Virtual Machines and Containers

Let’s tie this back to virtual machines and containers.

Much like our second scenario, virtual machines add their own operating system on top of the existing operating system on the server.

And, they must use a layer of middleware called a hypervisor to allow each virtual machine to share the hardware capacity.

It kind of looks like this:

Image Credit

So, there are three levels of software that must work together alongside the files in your application:

Host OS
Hypervisor
Guest OS

There are certainly some advantages here- for example, each virtual machine can run its own operating system, which adds more flexibility. But, it also adds a series of resource-intensive software layers.

Let’s return to the office space example to learn about using containers. Imagine the year is now 2015, and coworking spaces like WeWork have become popular.

At these coworking spaces, you simply need to start paying a month-to-month lease per desk. The property managers take care of snacks, cleaning, furniture and everything else.

In other words, you are able to benefit from the space’s existing operating system!

Here’s what that looks like:

Great! Now each CEO can focus on just running their company.

In fact, this is the key distinction between containers and virtual machines- as you can see in the diagram above, containers share the host operating system. That means they do not need to run their own OS, or work with a hypervisor to distribute hardware resources across multiple operating system.

This means that containers tend to be much more scalable than virtual machines- you can easily deploy new containers in a standardized environment with fewer points of failure. It’s also more cost-effective since you do not need to pay to run all the extra software.

Advantages/Disadvantages of Containers

Keep in mind, there are hundreds of servers on AWS that are running the exact same OS all around the world. That means that you can easily manage containers with your web app all around the world, with very little overhead or custom setup.

There is one major disadvantage to containers- security vulnerabilities. Each container has root access to the server, so problems that start with one container on a server can then affect others as well.

Let’s return to the original point of this article- Docker allows developers to create and manage containers.

So, in our analogy, the Docker service isn’t the building itself- that’s hardware (servers) and Amazon Web Services. And it isn’t an individual company that rents space- those are like containers.

In this case, Docker is like the coworking space management company- they make it possible for you to rent office space (or server space) in a new way!

Interested in using other similar tutorials? Check out the CodeAnalogies blog for explanations of other common webdev topics.

State (in JavaScript) Explained by Cooking A Simple Meal

Kevin Kononenko — Tue, 30 Apr 2019 00:19:50 +0000

When you start writing simple JavaScript programs, you don’t need to worry about the number of variables you are using, or how different functions and objects work together.

For example, most people start out by using a lot of global variables , or variables that are scoped at the top level of the file. They are not part of any individual class, object or function.

For example, this is a global variable called state:

let state = "global";

But once your program starts to involve many different functions and/or objects, you will need to create a more rigorous set of rules for your code.

This is where the concept of state comes into play. State describes the status of the entire program or an individual object. It could be text, a number, a boolean, or another data type.

It’s a common tool for coordinating code. For example, once you update state, a bunch of different functions can instantly react to that change.

This article describes state in the context of React, a popular JavaScript library.

But guess what? Even state can give you headaches once your code gets complicated! Changing state can cause unintended consequences.

Let’s stop right there. State is a popular tool in object-oriented programming , or OOP. But, many programmers prefer functional programming , which discourages state changes. JavaScript supports both paradigms.

Okay, that’s a lot of terminology at once. I wanted to find a way to show how OOP and functional programming can accomplish the same goals, even if functional programming does not use state.

This tutorial will show how you might cook a meal of spaghetti and sauce from an OOP and functional perspective.

Here’s a quick preview of the two different approaches:

Let’s jump into it. In order to understand this tutorial, you just need to understand functions and objects in JavaScript.

Object-Oriented Method (Using State)

In the graphic above, we showed two different approaches to making this pasta dinner:

A method that is focused on the state of the different tools , like the stove, the pot and the pasta.
A method that is focused on the progression of the food itself , with no mention of state of the individual tools (pots, stoves etc.)

The object-oriented approach focuses on updating state , so our code will have state at two different levels:

Global, or the state of this entire meal.
Local for each object.

We are going to use ES6 syntax in this tutorial to create objects. Here’s an example of global state and the “Pot” prototype.

let stoveTemp = 500;

function Pot(){
  this.boilStatus = '';
  this.startBoiling = function(){
    if( stoveTemp > 400)
      this.boilStatus = "boiling";
  }
}

let pastaPot = new Pot();
pastaPot.startBoiling();

console.log(pastaPot);
// Pot { boilStatus = 'boiling'; }

Note: I simplified the console.log statement to focus on the state update.

Here’s a visual representation of that logic:

Before

After

There are two states, and when the pastaPot is created via the Pot prototype, it initially has an empty boilStatus. But then, there is a state change.

We run pastaPot.startBoiling(), and now the boilStatus (local state) is “boiling”, since the global state of stoveTemp is over 400.

Now let’s go one step further. We will allow the pasta to become boiled due to the state of pastaPot.

Here’s the code we will add to the snippet above:

function Pasta (){
  this.cookedStatus = false;
  this.addToPot = function (boilStatus){
    if(boilStatus == "boiling")
      this.cookedStatus = true;
  }
}

let myMeal = new Pasta();
myMeal.addToPot(pastaPot.boilStatus);

console.log(myMeal.cookedStatus);
// true

Woah! That’s a lot at once. Here’s what happened.

We created a new prototype of “Pasta”, where every object will have a local state called cookedStatus
We created a new instance of Pasta called myMeal
We used the state from the pastaPot object that we created in the last snippet to determine if we should update the state called cookedStatus in myMeal to cooked.
Since the state of boilStatus in pastaPot was “boiling”, our pasta is now cooked!

Here’s that process visually:

Before

After

So, we now have the local state of one object, that depends on the local state of another object. And that local state depended on some global state! You can see how this can be challenging. But, it is at least easy to follow for now, since states are updated explicitly.

Functional Method (without state)

In order to fully understand state, you should be able to find a way to accomplish the same outcome as the code above without actually modifying state. This is where functional programming helps!

Functional programming has two core values that separate it from OOP: immutability and pure functions.

I am not going to go into too much depth on those topics, but if you want to learn more, I encourage you to check out this guide to functional programming in JavaScript.

Both of these principles discourage the use of state modification in your code. That means that we can’t use local or global state.

Functional programming instead encourages us to pass in parameters to individual functions. We can use outside variables, but we can’t use them as state.

Here’s an example of a function that will boil the pasta.

const stoveTemp = 500;

const cookPasta = (temp) => {
  if(temp > 400)
    return 'cooked';
}

console.log(cookPasta(stoveTemp));
// 'cooked'

This code will successfully return a string of ‘cooked’. But notice- there is no object that we are updating. The function simply returns the value that will be used in the next step.

Instead, we are focused on the inputs and outputs of one function: cookPasta.

This perspective looks at the transformation of the food itself, rather than the tools that are used to cook it. It’s a little harder to visualize, but we don’t need to have the function depend on external state.

Here’s what it looks like.

Think of it as a “timeline view” for the progress of the meal- this particular function just covers the first part, the transition from dry pasta to cooked pasta.

Now let’s cover the second part as the food is served. Here’s the code that will serve the meal. It will come after the code block above.

const serveMeal = (pasta) => {
 if (pasta == 'cooked')
   return 'Dinner is ready.'
}

console.log( serveMeal(cookPasta(stoveTemp)) );
// 'Dinner is ready.'

Now, we are delivering the results of the cookPasta function directly into the serveMeal function. Again, we are able to do this without changing state, or changing data structures.

Here’s a diagram that uses the “timeline view” to show how these two functions work together.

Interested In More Visual Tutorials?

If you would like to read more visual tutorials about HTML, CSS and JavaScript, check out the main CodeAnalogies site for 50+ tutorials.

JavaScript’s Arrow Functions Explained By Going Down A Slide

Kevin Kononenko — Sat, 20 Apr 2019 17:41:00 +0000

If you have been using JavaScript for a few years, you are probably familiar with this syntax:

function addTen(num){
  return num + 10;
});

console.log(addTen(10));
//20

This function syntax was popular in ES5, or ECMAScript 5.

There is one major advantage to this syntax: It includes the word function, so it is obvious that you are writing a function!

A function clearly takes in anywhere from 0 to many arguments and runs a specific set of statements every time that it is called.

But then the world of JavaScript took a leap forward with ES6 in 2015.

Now, the same function as above would be written like this:

let addTen = (num) => num + 10;

console.log(addTen(10));
//20

Now, there is no function keyword, and no return statement! Functions in ES6 are much more terse , or concise.

So, since those obvious clues have been removed, you might be having a little bit of a hard time with understanding the different parts of arrow functions.

Fortunately, as you will soon see with a few animations, arrow functions are pretty easy to understand once you learn to visualize the arrow “=>” in a new way.

So here is how arrow functions are just like a water slide. In order to fully understand this tutorial, it might help to know about map functions and scoping.

Arrow Functions Visualized

Let’s explore the addTen function a little more deeply.

let addTen = (num) => num + 10;

console.log(addTen(10));
//20

This function will transform one parameter and output that parameter with 10 added.

The transformation happens with that subtle “=>” arrow.

It can also be written with a return statement:

let addTen = (num) => {return num + 10};

console.log(addTen(10));
//20

I like to transform that arrow into a tube slide in my mind to show what is actually happening. Here is what I mean:

The equals sign is like the tube slide and the arrow is like the landing pad.

Arrow functions follow this pattern:

(parameters) => {statements}

So let’s add those to the diagram with our addTen function example.

The last thing we need to show is how the parameter, which is 10 in this case, goes down the slide and becomes available in the statements of the function. Here’s what that looks like.

That’s all it is! Pretty straightforward.

Now, let’s look at an example where there are two different parameters. Here is our new function:

let multiply = (num1, num2) => {return num1 * num2};

console.log(multiply(2, 10));
//20

In this case we are just multiplying the two parameters together. Both will go down the slide together. Like this:

There’s one more example you should know about- combining the map() method with arrow functions.

The map() method will send every element in an array into the arrow function, in order.

Let’s go through an example- imagine that you have an array of numbers, and you want to get the square root of each one.

Here’s the code.

let nums = [1, 4, 9];

let squares = nums.map((num) => {
  return Math.sqrt(num);
});

console.log (squares)
// [1, 2, 3]

You need to know a little about the map method to understand this one. But, you will probably notice the terse syntax yet again- the map() method is much shorter than writing a for() loop.

Here’s what is happening in this code:

There are three elements in the nums array, so the num parameter goes down the slide 3 times.
The Math.sqrt() method takes the square root of the number each time.
The result is stored in the squares array each time.

The Difference Between Arrow Functions And Traditional Functions

You might be wondering… is this simply a difference in syntax?

Actually, there is one important way that the traditional ES5 functions and ES6 functions work differently.

The big change is that arrow functions do not have their own scope. Therefore, if you try to use the this keyword, you will be surprised when it does not refer to the scope of the arrow function.

To go back to our slide analogy, this means that this is the same at the top and bottom of the slide. If we were using ES5 functions, then this would be different at the top and bottom of the slide.

To quickly recognize this in code, just look for the function keyword. If you see it, that means that a new scope is being created. If not, assume that you are using the scope of the enclosing function.

Interested In More Visual Tutorials?

If you would like to read more visual tutorials about HTML, CSS and JavaScript, check out the main CodeAnalogies site for 50+ tutorials.

Node Package Manager (NPM) Explained by Directing A Movie

Kevin Kononenko — Wed, 24 Oct 2018 03:03:08 +0000

If you understand the general way that Hollywood movies are made, then you can understand Node Package Manager (NPM).

Did you know that the initial version of Node.js was written by just one programmer, Ryan Dahl, in 2009?

Today, in 2018, millions of developers have used Node.js to create the back-end for their web applications. But, Node has relied on an active open-source community to build out many specialized packages within the Node Package Manager, or NPM. That was created by Isaac Schlueter in 2010.

There are two good reasons why Isaac did not develop all of these specialized functions himself:

Developers would not want to use a massive, clunky framework that was written to cover hundreds of use cases
It would take too damn long to create all the specialized packages yourself!

Instead, Ryan knew that if Node grew in popularity, developers would be willing to contribute. So, he launched NPM in 2010 to organize all these packages created by the community.

However, as a beginner web developer, it can be challenging to understand this whole ecosystem, and how to access it on your local computer.

After thinking on it for awhile, I realized that using NPM is kind of like being the director of a Hollywood movie. It’s your job to juggle a bunch of people (or packages) with specialized functions without making everyone crazy (or making it impossible to build your app).

So here’s the full guide to NPM. In order to understand this tutorial, you just need to know the difference between front-end v. backend.

What Is NPM?

Imagine that you are the director a new Hollywood movie. After accepting the role, you immediately need to begin hiring actors and other executives to create the movie alongside you.

Of course, that brings the immediate question: which actors/actresses will you hire? How will you make sure that they can all work together? How will you fit it within budget?

Or, will you go a completely different direction, and try to build the perfect team from scratch with relatively unknown actors?

If you want to hire out a team, you will need to look at some sort of directory to find the right people. I don’t know if Hollywood has some sort of internal directory, but IMDB is one that comes to mind. Or, in the days, before the Internet, there was probably even a physical directory.

Just like IMDB has information on thousands of actors that you can use to make a hiring decision, NPM has hundreds of thousands of “packages” that offer specialized functions. They are all written in JavaScript, so TECHNICALLY you could rewrite them… but that is not the point. They are meant to make your life easier by making new functionality instantly available.

It’s just like hiring a known actor/actress- that person is a specialist in certain types of roles due to past experience.

We all know Liam Neeson’s specialty

So, as a developer, you access the NPM registry to add specific packages to your web app, which should make your life easier. And just like all actors/actresses have built their own careers, all NPM packages have been built by individual developers or teams and contributed to the registry.

Within your code, all of these packages are tracked in the package.json file. So, that file is kind of like the list of people that are involved in the movie. Here is an example of that list:

We will cover the versions later in this tutorial.

Packages Explained

Let’s imagine that your movie has 100 roles that need to be filled. If you had an unlimited budget, would you want to fill all those roles with famous actors/actresses that had played similar roles in the past?

Probably not. Everyone would want to be the star of the show and bend the rules to fit their character. It would be a nightmare. But, if you only hire unknown actors… it is going to be pretty tough to make an excellent movie! It takes years of experience to become a great actor, after all.

Similarly, when you are building a web app, you are constantly faced with a choice: can I build this functionality myself, or should I use a package to accomplish the task?

Do you know the movie “Super Troopers“? It’s a comedy classic, and the budget was just $3 million dollars. However, most excellent movies cost $10-100 million dollars. You can build an incredible web app from scratch… but you probably want to use packages.

Let’s say that you are hiring Mark Wahlberg, a famous American actor, for your movie. When Mark joins your movie, it is not just him that joins! He has a team of people that support him and make him successful. A chef… a trainer… an agent…

Similarly, each individual package does not operate independently. The package authors used other NPM packages to make their life easier too. In fact, their package will share some dependencies with other packages, just like Mark Wahlberg might share a private chef with other actors and actresses.

Here’s the list of dependencies for request, a popular package:

So let’s return to our package.json exale from above:

When you add the “axios” package to your app, you are not just adding the axios file. You are also adding any dependencies that the axios file will need, if you had not previously added them with another package. Those are not explicitly stated, but you can always find it within the node_modules folder.

This is one of the benefits of npm. When you add a new package, you don’t even need to check if you are already using all the necessary packages that support the package that you are using. npm will automatically add the enw ones to your directory.

Versions Explained

Do you see the three sets of numbers next to each package above? That’s the version number. Since developers are constantly updating their packages, you can choose to use a specific version of a package, or automatically use the latest version.

So, when you are using 40 different packages in your project, and they are all constantly shifting… you may find that compatibility issues arise. For example, when React releases its newest version, your app may no longer function as you would expect. That’s where testing comes into play, but that’s the subject of another tutorial.

Think of it as actors/actresses at different stages of their career. Some may play similar roles throughout their career, while others may change drastically.

Young vs. old Clint Eastwood

Using the Command Line

When you download Node and NPM to your local machine, you can instantly use a variety of commands to work with the NPM directory. One common one is:

npm install

If you want to install the express package, you would type in the command line:

npm install express

Then, NPM would download the express code and its dependencies to your local computer. That’s kind of like the act of hiring a new actor. Or:

npm uninstall express

That’s like “firing” the express package from your app.

You can add new commands in the “scripts” section of your package.json file. One common one is “start”, which means “start running the node server”. It looks like this:

Kind of like a director yelling “Action!”.

Dependencies Explained

So far, we have only briefly touched on the concept of dependencies. Your app will likely have a couple packages that only run on the local version, like testing and transpiling tools. In other words, you should have a couple tools that you only use in your local environment, and not on the production version.

If you need a refresher on the difference between localhost and production, check out this guide.

Think about all the time and energy that goes into making a movie. Only a small fraction of it occurs on the official set with the cameras rolling. Behind the scenes, there are hours of work on memorizing lines, lifting weights in the gym and learning new accents. To make the team more effective, the director might hire specialized coaches for each one of these functions.

So, when we look at all the packages being used by a Node app, we can actually divide it up into two categories:

Packages used in both production and local
Packages just used locally

Grunt is a task runner that automates repetitive commands on the command line. Nodemon automatically restarts your server upon any changes in your server code.

In your package.json file, these are separated into two sections: dependencies and devDependencies. Here is what that looks like:

Get The Latest Tutorials

Did you enjoy this tutorial? Check out the Codeanalogies blog to get the latest explanations of HTML, CSS and JavaScript concepts.

JavaScript Promises Explained By Gambling At A Casino

Kevin Kononenko — Tue, 11 Sep 2018 03:49:29 +0000

If you have ever gambled or watched a movie about gambling, then you can understand promises in JavaScript.

We all love the asynchronous capabilities of JavaScript. In fact, we love them so much that sometimes, we overindulge. And then we get code that looks like this “pyramid of doom”.

Image Credit

This is commonly known as “callback hell” because you probably don’t want to re-read that code and try to understand how everything works, and in what sequence it works. In fact, nobody on your team does either.

A few things are difficult about the above example:

Unclear error handling. What happens if something goes wrong?
Each function depends on the previous function. You do not need the asynchronous style. You want to make the order clear to others reading the code. When you chain this many functions together, a synchronous style of code will be more readable.
You need to continually track the variables for input into a function, and then output. And also track the logic that happens to each output. This becomes exhausting.

You could make this entire process more understandable using promises. If you are like me, you may have heard of promises once or twice, but then ignored them because they seemed confusing. The basic uses of promises are actually pretty easy if you understand callbacks.

Promises encourage straightforward, single-purpose functions that will allow you to write clear code and understand every step without headaches. After thinking about it for a while, I realized that promises are just like a trip to the casino. While a casino “modifies” the amount of money in your bank account (ahem, removes), a chain of promises modifies data in a specific sequence.

So, let’s jump into it. If you do not have experience with callbacks, check out my explanation on the principles of callbacks. If you are looking for a more technical explanation of promises, check out this guide or this guide or this video.

What is a promise?

Let’s say that you are taking a weekend vacation to a casino. You have two weeks of salary in your pocket, and you are going to enjoy every moment as you bet it away, down to the last dime. Or perhaps you will get lucky, and end up winning money?

You get to your hotel room, then head down to the casino. Each type of game accepts cash, so you will need to go to the ATM to withdraw $1000 and get started.

Let’s take a step back and think about this scenario. Although cash can be used for anything outside of the casino, it means one thing inside- the number of games you have left before you run out of money. That cash amount will likely shrink further and further over the course of the weekend. It could also grow, but you have already promised yourself that you will not lose more than $1000 this weekend.

Notice how your remaining money amount gets passed from game to game in the diagram above?

A promise holds the place of a value that does not yet exist, but will certainly exist in the future. This allows you to clearly follow a function and understand its beginning and end. As shown above, promises are a great way of giving clarity to consecutive asynchronous functions and clarifying inputs and outputs.

Promises pass the products of one asynchronous function directly into the next function. That function will start as soon as the previous function has returned a value. Or, if it returns an error, you will run a different function. We can cover that contingency later.

Creating Your First Promise

There are actually two types of promises: producer and consumer.

The producer is the first promise in the chain, while the consumers wait on a result from a previous promise in the chain. In this case, going to the ATM is the producer, since you need money to play games (obviously).

Also, a promise can have one of three states:

Pending- has not completed yet
Fulfilled- Promise has completed and returned a value
Rejected- Promise has completed with an error or failed.

So, if you visit an ATM, and you fail to complete the operation that you intended… well, you may not have the $1000 in your bank account and should exit the casino immediately. If you successfully withdraw $1000, then you have returned a value.

So let’s turn this into code. Here is the promise syntax.

let withdraw = new Promise(function(resolve,reject){

  let amount = visitATM(1000);
  return resolve(amount)
});

And here is a line by line explanation of that code.

Line 1- Declare the promise with two possible results: fulfill or reject

Line 2- A function to withdraw money from the ATM

Line 3- Return a settled state with the value from the visitATM function

Just like any other asynchronous code, this approach allows your code to wait on the status of the visitATM function. There’s no point in continuing if that isn’t completed!

Chaining Multiple Promises

Let’s assume that you want to play slots, poker and roulette while you are at the casino. Each one requires you to buy-in via cash. Of course, if you bet too much money on poker and run out, then you will not be able to play any of the following games.

Let’s say that you want to play slots first.

let withdraw = new Promise(function(resolve,reject){ 

  let amount = visitATM(1000); 

  return resolve(amount) 
}); 

withdraw.then(function(amount){
  let slotResults = playSlots(amount, 100);

  if(slotResults <= 0)
    throw err;

  return slotResults;
});

Promises use the .then syntax to show what should happen after the previous promise is settled , or completed. In this case, the final result of the withdraw promise is contained within amount.

So, when we set up the next promise using .then(), we also name the argument amount to correspond to that previous result.

One other important note- playSlots is a made-up function. We are imagining that it takes two arguments – the total amount of money you have, and the amount you are willing to gamble.

Let’s add another step to this promise chain- a game of poker. It will work similarly to the slot machine promise. We will gamble as much as we want in this one.

withdraw.then(function(amount){
  let slotResults = playSlots(amount, 100);

  if(slotResults <= 0)
    throw err;

  return slotResults;
})
.then(function(slotResults){
  let pokerResults = playPoker(slotResults);

  if(pokerResults <= 0) 
    throw err; 

  return pokerResults;
})

So, we feed whatever cash remains after playing slot machines into the poker game. Pretty aggressive, if you ask me.

Here’s a code diagram of this part.

Let’s imagine that we have now gambled away all our money. Although we originally intended to play more games, we have no money left. There may be more promises added in this chain, but we will not be able to settle them.

Instead, since we have $0 left after poker, this promise will throw an error. It is still settled , but in a rejected state.

This is where the .catch() method comes in handy. Catch allows us to handle any errors that may occur in our promise chain. We don’t need to write error handlers for each callback.

Let’s imagine that you head straight to the bar when you have gambled all your money. Here’s what that looks like in code.

withdraw.then(function(amount){
  let slotResults = playSlots(amount, 100);

  if(slotResults <= 0)
    throw err;

  return slotResults;
})
.then(function(slotResults){
  let pokerResults = playPoker(slotResults);

  if(pokerResults <= 0) 
    throw err; 

  return pokerResults;
})
.catch(function(e){
  goToBar();
});

This one catch statement will work regardless of which promise is rejected.

Using Objects Within Promises

So far, our promises have only returned a number. But, they can also pass any other type of data along the chain.

Let’s imagine that you played a slot machine, and won some money. The slot machine does not give out straight cash- it gives you a ticket that you can redeem later. That’s called the ticket-in, ticket-out system.

Now, you need to track two values throughout the chain- the amount of cash on hand, and the value of your tickets. An object would work best in this situation.

Let’s modify the second promise in the chain, where you played slots.

withdraw.then(function(amount){
  let ticketValue = playSlots(amount, 100);

  if(ticketValue <= 0)
    throw err;

  return {tickets: ticketValue, cash: amount};
});

You are now returning an object with two properties. Here is what that looks like:

The poker table will only accept cash for chips, so you need to use that property in the next promise.

withdraw.then(function(amount){
  let ticketValue = playSlots(amount, 100);

  if(ticketValue <= 0)
    throw err;

  return {tickets: ticketValue, cash: amount};
})
.then(function(slotResults){
  let pokerResults = playPoker(slotResults.cash);

  if(pokerResults <= 0) 
    throw err; 

  return {tickets: slotResults.tickets, cash: pokerResults};
})
.catch(function(e){
  goToBar();
});

Notice a couple things:

I only used the cash value in the poker game. But, at the end, I still need to add the ticket value into the final object in order to pass it along the chain. Otherwise, I would have lost my winnings.
slotResults contains the object from the previous promise, even though that object did not have a name.

Get The Latest Tutorials

Did you enjoy this explanation? Check out the CodeAnalogies blog to get the latest visualized tutorials of HTML, CSS and JavaScript.

Amazon Web Services (AWS) Explained by Operating a Brewery

Kevin Kononenko — Thu, 30 Aug 2018 04:55:55 +0000

If you understand how a brewery works, then you can understand Amazon Web Services (AWS).

When you are working on building your first web app, you ALWAYS hear about the ease of launching a new product compared to past years.

People will say things like, “Back in my day, you had to buy your own server and configure it yourself!”

Or, “We would stay up all night debugging the latest issue with our server infrastructure.”

Fortunately, those days are long gone. You can deploy your new web app for $10 a month within an hour, if you know what you are doing.

But, there is one small problem. Standard tools like Amazon Web Services (AWS) can be pretty complicated, at least to a newbie. Although they offer the incredible ability to scale from your first users to hundreds of millions of users… they also require some configuration.

I wanted to learn about all the major options that AWS offers. After thinking about it for a few hours, I realized that the AWS ecosystem is similar to all the different parts of a large-scale brewery.

Here’s a quick preview:

So, here is how 5 popular AWS tools work behind the scenes of a web app. I’ll also explain Heroku, a popular tool for deploying web apps that offers less flexibility but is easier to get started with.

The official video from AWS gives some context about the tools we will be discussing:

In order to understand this tutorial, you just need to understand the concept of the client-server model, which you can learn more about here.

The Context of Amazon Web Services

Let’s imagine that you are passionate about brewing beer. You start in your kitchen by brewing for yourself and friends. Soon, word escapes about your delicious work. In order to meet the growing demand, you decide to rent some equipment and space in a warehouse to see if you can create a full-blown company. You will take orders from distributors, restaurants, and independent businesses.

In the example above, an order comes in from a client — one of the restaurants or distributors. That’s called a request. Your brewery will provide the order and collect payment via an invoice. That’s called the response.

Similarly, web browsers send requests to servers based on actions taken by users. The server returns the required information via a response.

This is just a high-level view, of course. We are going to dig into all the different processes that happen on the server side in our exploration of AWS. In our brewery analogy, we are assuming that the orders are already coming in left and right. It is now our job to organize a whole brewery so we can deliver those orders reliably.

Heroku Explained — A Much Simpler Alternative to AWS

Before we get into the 5 parts of AWS, you probably should know about the simpler alternative. Heroku manages many of these systems for you. In fact, it is built on top of AWS infrastructure.

Heroku allows you to deploy new versions of your app straight from your command line using git push heroku master. It also has a rich library of add-ons that allow you to add new functionality to your dynos, or virtual servers.

Heroku is kind of like hiring a 3rd party contractor to manage your brewery. All you need to do is provide the recipes, and this contractor will use their expertise in brewery operation to produce the beer. They provide the team, the equipment, and relationships with suppliers.

This may feel miraculous. Now you can skip all that painful time and energy that you would need to spend on learning how to run a brewery! But there are two reasons to be cautious.

This approach will be more expensive. You are paying the firm for their expertise alongside the cost of salaries, raw materials, etc.
They may not scale up like you would like them to. Let’s imagine that you start receiving millions of dollars in orders, and you need to grow your operation. They may not be prepared to scale as quickly as you are.

Heroku has the same pros/cons. It is a little more expensive but allows you to get started immediately. If you scale up, you may need to migrate your services to AWS, which will mean that you will need to learn the AWS system anyways.

With that, let’s get into the different tools within AWS.

AWS Storage Tools

This is the first of three categories that are going to seem similar, so buckle up! Within our brewery, there are plenty of static assets that do not change but are necessary for any type of brewing. Think about the machinery, the assembly line or the power tools that the workers use. You cannot take these items apart and recombine them. But, they can be used over and over again and still be useful.

This is kind of like Amazon S3. S3 is the cloud service that allows you to store static assets like images. It stands for Simple Storage Service.

The concept of “storage of static assets”, in this case, is a little different than what you might think about in real life. In real life, storing static items might mean putting something in an attic and forgetting about it. But when it comes to cloud services, it means preparing an object or image to be used within milliseconds.

This is different than database storage, because data in a database can be queried. Static assets can only be requested.

AWS Database Services

Amazon Relational Database Service (RDS) allows you to set up and operate your relational database within AWS. Some common examples include MySQL, PostGreSQL and Microsoft SQL Server.

In our brewery example, this is kind of like the parts of the brewery that store bottles, labels, hops, malt and any other ingredients you will need to make the beer. And I guess it would also include your company bank account, since that is a form of dynamic storage.

You might be wondering why we are discussing storage AGAIN after the previous section. It’s because all of these elements are much more dynamic- they are being constantly combined or modified to handle requests from the users/customers.

This is the type of data that you will query , rather than request, like in the previous example. If you were managing the databases for Facebook, for example, this would be user data and posts that would later be included in the News Feed.

One more final note: this data (or hops/malt/bottles) is only useful for actually delivering a response to the user. If you wanted to measure your brewery’s performance, you would need to set up a new process for your operations team.

Imagine if your operations team was frantically running around your brewery, trying to keep track of your performance while the normal workers were trying to produce and bottle as much beer as possible. These two teams have separate interests.

That is where the data warehouse comes into play.

AWS Data Warehouse Tools

Let’s make one thing clear here: “data warehouse” is a terrible name for cloud service. Okay sure, it might make sense to a developer with years of experience, but to a newbie… how many things in web development are similar to a warehouse? MANY.

One common example of a data warehouse product is Redshift. These types of tools make it easy for developers to analyze their data. They include data from relational databases, as well as ERP, CRM and marketing automation data.

Let’s return to our brewery analogy. So far, in our brewery, all of our “data” is not in a very accessible form. It’s in the format of bottles, hop bags and whatever other raw materials are lying around the facility. An analyst would need to manually count all of these physical items if they wanted to analyze the factory’s efficiency.

You need a way to convert that physical data into machine-readable data, which your ops team can use to make the brewery more efficient. Think of it like a sensor system around the facility. The sensors convert the physical movement of raw materials into machine-readable data, which can later be analyzed.

So now, as our factory operates, data is automatically collected and shared with the factory ops team so they can analyze efficiency.

See how this reduces stress on both the factory and production team? The production team can focus on making beer on the floor while the operations team can analyze from their office. This is a good reason to use a data warehouse tool as well. It reduces the number of queries on your database, which can slow performance.

Hopefully, you see why “data warehouse” tool is slightly misleading. Yes, this does create a new dataset strictly for analysis. But, it is hard to tell why it is more “warehouse-like” than any other part of the system.

AWS Computing Tools

In all of the diagrams so far, have you noticed that “brewery” is in the middle, regardless of whether the diagram shows an actual brewery or a cloud computing environment?

That is because we haven’t yet covered the service that ties this all together: EC2, or Elastic Compute Cloud. EC2 allows you to launch virtual instances, which are kind of like the brewery in this analogy.

Instances are virtual servers. Unlike previous technologies, where your code was tied to one physical server, virtual servers allow you to launch your own environment in the cloud, which is composed of many connected servers. This is the part that ties all the other AWS services together.

It’s kind of like being able to start up or shut down a new brewery at any time in any part of the world by copying your existing brewery. That may not be possible in real life, but it is possible in the AWS ecosystem. EC2 provides similar functionality to both the physical space and the workers in the brewery.

The diagram may be slightly misleading, because a virtual server does not take up a whole server. It exists within a network of servers. But that was too complicated to show in a small diagram. So I kept it.

AWS Management Tools

The final category of tools is management tools, like Elastic Beanstalk or CloudWatch. These tools can:

Monitor other tools listed above
Set up processes to help tools from multiple categories work together

Image Cred: FreeCodeCamp

In the graphic above, you can see how many tools can help with deploying and maintaining your app. That’s why these tools are similar to the company’s management team. They are not personally producing beer for your company, but instead, they help all the divisions work together.

There is a wide variety of tools in the management category, so I am not going to cover any individual one in depth. They sit at a level above the other tools discussed.

Get The Latest Visual Tutorials

Did you enjoy this tutorial? Check out the CodeAnalogies blog to get other visual tutorials on HTML, CSS and JavaScript.

JavaScript’s Reduce Method Explained By Going On a Diet

Kevin Kononenko — Wed, 01 Aug 2018 03:31:47 +0000

If you have ever read a nutrition label, then you can understand the reduce() method in JavaScript.

The reduce method in JavaScript gives you a simple way to take an array of values and combine them into one value, or sum the array based on multiple category.

Wow, that is a lot in one sentence, so let’s take a step back here.

Of course, you can always use a for loop to iterate through an array and take a specific action on each value. But, if you do not use methods like filter(), map() and reduce(), then your code will become harder to read. Other developers will need to read each loop thoroughly to understand the purpose. And, it will create more chances for bugs, since you will need to create more variables to track individual values.

Filter methods take all the elements in an initial array, and only allow certain elements into a final array.

Map methods run a function on each element in an initial array before storing it in a final array.

And reduce methods combine elements from an initial array into a final value or array of values.

I realized that this was kind of like dieting. From very simple methods like calorie counting, to more complicated diets like Atkins or WeightWatchers, the goal is to distill all the food that you might eat over the course of the day into one value (or values) to see if you are on track to lose weight.

So let’s jump into it! In order to understand this tutorial, you just need to have experience with for loops.

Simulating Reduce With a For Loop

Here’s a quick way to show the functionality of reduce(), using a for loop. Let’s say that you have an array with the calorie counts of 5 separate foods that you have eaten over the course of the day. You want to figure out how many total calories you have consumed. Here’s the code.

let calories = [800, 200, 100, 300, 700];
let total = 0;

for (let i = 0; i< foods.length; i++){
  total += calories[i];
}

//value of total will be 2100

It’s pretty simple. You create a variable to hold the final amount, then add to it as you run through the array. But, you still needed to introduce a new variable, and the loop gives no clues about the purpose of the loop.

A Simple Example of Reduce

Let’s learn how to accomplish the same goal with the reduce() method.

Reduce is an array method so we will start with the array of calorie counts.
It uses a callback function that runs on each element in the array.
It uses a return statement to show how the value should accumulate after each iteration of the array.


let foods = [800, 200, 100, 300, 700];

let total = foods.reduce(function(sum, item){
  return sum + item;
});

So, reduce has some concept of memory. As you go through each item in the array, the values are being tracked in the sum argument. In our previous example, we had to declare a new variable outside the scope of the loop to “remember” the values.

There may not seem to be too much of a difference in readability between this and for(). But, when you (or another developer) need to scan hundreds of lines of code, reduce will give you a quick hint about the purpose of the code block.

Example 2- Using Objects

We have just been looking at one-dimensional arrays thus far. But, if you can iterate through an array full of numbers, you can also iterate through an array full of objects. Let’s add a name to each element so we can figure out what we are actually eating over the course of the day.

let foods = [
  {name: 'steak', calories: 800},
  {name: 'fruit', calories: 200},
  {name: 'salad', calories: 100},
  {name: 'chips', calories: 300},
  {name: 'ice cream', calories: 700},
];

let total = foods.reduce(function(sum, item){
  return sum + item['calories'];
}, 0)

//value of total will be 2100

You ate a steak for breakfast… with some fruit… then some salad and chips for lunch… then finally ice cream for dinner. That’s a heck of a day.

Hopefully, you can see the flow as we go through the array. As we go through each element, the sum grows to represent the total calories consumed over the day. The entire point is to put these values into one big bucket- the number of calories over the day.

Example 3- Using Mulitple Categories

So if it is all about calories, why the heck are there so many different diets? I am not going to wade into thenutrition science, but here’s the general summary- there is plenty of disagreement over the “best” way to lose weight. Some encourage you to just count calories, while others will look at protein, carbs, fat and any other number of factors.

Let’s imagine for a moment that you want to change the code so that you can evaluate your diet based on any common dieting system. You will need to track carbs and fat for each type of food. Then you will need to summarize it all at the end so you can figure out how many grams you consumed in each category. Here is our foods object with fake nutritional values.

let foods = [
  {name: 'steak', calories: 800, carbs: 10, fat: 30},
  {name: 'fruit', calories: 200, carbs: 20, fat: 0},
  {name: 'salad', calories: 100, carbs: 0, fat: 5},
  {name: 'chips', calories: 300, carbs: 10, fat: 10},
  {name: 'ice cream', calories: 700, carbs: 20, fat: 20},
];

Now, we need to run the reduce() method. But, it can’t all be tracked in one value. We want to keep our categories. So, our accumulator needs to be an object with the same categories as the array.

Here’s a quick GIF of the process.

As you go through each item, you will change the value of a specific property within an object. If that object does not yet have a property with the correct name, you will create it. Here is the code.

let total = foods.reduce(function (buckets, item) {
  let calories = item.calories;
  let carbs = item.carbs;
  let fat = item.fat;

  buckets['calories'] += calories;
  buckets['carbs'] += carbs;
  buckets['fat'] += fat;

  return buckets;
});

/*total object is
{name: 'steak', calories: 2100, carbs: 60, fat:65}
*/

We are using buckets as an object to categorize the values based on name of their property. We use the += operator to add to the appropriate bucket for each value within the object originally from the foods array. Notice how we don’t store the name of each food? That is because it is insignificant- we just want the numbers so we can analyze the success of your diet for the day.

As you can see, there was one issue in our output. We have a name field that is set to 'steak'. We don't want to store the name! So, we need to specify another argument- the initial value.

This argument comes after the callback, and we want to initialize the calories, carbs and fat field to 0, so that our reduce method knows that those are the only three key/value pairs we will be using for the buckets argument. You can see an example here.

let total = foods.reduce(function (buckets, item) {
  let calories = item.calories;
  let carbs = item.carbs;
  let fat = item.fat;

  buckets['calories'] += calories;
  buckets['carbs'] += carbs;
  buckets['fat'] += fat;

  return buckets;
},
{calories: 0, carbs: 0, fat:0}
);

/*total object is
{calories: 2100, carbs: 60, fat:65}
*/

Get The Latest Tutorials

Did you enjoy this tutorial? Check out the CodeAnalogies blog to get the latest visual guides to HTML, CSS and JavaScript topics.

Web Caching Explained by Buying Milk at the Supermarket

Kevin Kononenko — Tue, 26 Jun 2018 03:20:25 +0000

If you have ever bought milk at the supermarket, then you can understand server-side and browser-side caching.

If you are an avid internet user (you probably are), you have benefitted from caching over and over again. But, you might not know when or how it is working its magic behind the scenes.

From a developer’s perspective, caching makes it much easier to build high-performing web apps and web servers. Instead of needing to constantly optimize servers that are overwhelmed by thousands of requests, developers can implement caching protocols to make life much easier.

Since caching might make a difference between 1 second to load a page and 2 seconds, the impact can feel a little bit…underwhelming. But, it’s necessary if you want to handle a high volume of users.

After using caching in a past web app, I realized that there had to be a better way to explain it than just walking through the terminology. I noticed that it aligned very well with the pathway of milk from a farm to your refrigerator, so I figured that would be a better way to explain it.

In order to understand this guide, you just need to know about the basics of web servers. Let’s get into it!

What would the internet look like without caching?

Before we get into caching, let’s think about what the internet would look like without caching. Imagine, for a moment, that you are living in the 1700s or 1800s in a rural area. You own a farm, and there is no refrigeration available. You have a few cows on your farm, but their milk is not nearly as valuable since it will spoil quickly.

Quick interruption: Some cultures still do not have access to refrigeration. They will either drink raw milk directly from a cow’s udder, or mix milk with grains and let it ferment. Interesting.

ANYWAYS, you want to sell your milk to others in your village. But, they will have a very limited time to drink the milk. Let’s say that one of your cows can produce a gallon of milk per day. But, if too many people show up to your farm looking for milk, you will need to send some home and ask them to wait til the next day.

Also, you can’t even think about adding more cows and scaling up your operation since you have such limited distribution. Only the other members of your village can buy your milk. You have some clear limits.

Without caching, you are limited by the computing power of your servers. Caching is used to load static assets, like:

Images
CSS
Static HTML files
JavaScript files

A server, by default, must submit a new response for every incoming request. But, a request to load a page could actually mean 4 separate requests — one from each of the categories above. When you take into account larger image files, your servers can become overwhelmed by users all over the world. Then, users will experience slow load times as they wait for their page to load.

Ideally, you would want to ease the demand on your servers by storing responses to common requests. Your server would not need to handle each new individual request, but instead, your cache could deliver an immediate response. You could always pay for more servers, but that can lead to uncontrollable expenses.

What is server-side caching?

Back to our farm scenario. Know what would make it a LOT easier to run a successful dairy farm?

A supermarket with refrigeration!

That way, people will not need to show up to your farm and consume the milk immediately. You will be able to keep it safely stored for a couple weeks at a time.

The supermarket removes a lot of the stress on your farm, because your cows will not be expected to produce in real-time. The supermarket will handle the demand. You just need to keep the cows productive on a daily basis. Even better, residents of all the surrounding villages can now buy milk from your farm, because it will always be available in the refrigerator.

Just like a supermarket, a server-side cache will handle popular requests and deliver content much more quickly and reliably.

In the image above, I use the term caching proxy. A caching proxy is a server that stores the static files that are used to respond to common requests. A caching proxy will intercept common requests and quickly deliver a response. It prevents those requests from stressing your main web servers.

You probably have a bunch of questions like,

What determines a “popular” request?
How long will the proxy cache the responses?

That would require a longer tutorial on setting up caching, but for now, you should know about one important concept called freshness. The caching proxy will have different files that have been cached at different times, and it needs to decide whether it should still serve these files. This will depend on your caching policy.

This also works just like milk in a supermarket. A supermarket manager needs to decide how long they will hold your milk before throwing it out. Caching proxies measure their success through a cache hit ratio — the percentage of content that can be served through the caching server.

What is a CDN?

So far, there is one grocery store selling your milk. Although that is a big improvement, you still have no way to get your milk to people outside the range of this local store. You are going to need to add more stores if you want to scale up your operation.

So, let’s say you start distributing your milk to more supermarkets. Now, you can satisfy customers across a much larger geographic range. This is similar to a content delivery network, or a CDN. A CDN is a series of proxy servers (like we discussed above) located all over the world.

As an end-user, you probably feel that high-speed internet allows most sites to load very quickly. However, this is only because they use CDNs to deliver static files at rapid speed!

If you are located in England and you are trying to load a file cached in a server in Virginia, you will experience some delay since the original signal can only travel so quickly along thousands of miles of cable. A local caching proxy in the United Kingdom would allow the site to load faster.

So, your servers can send a copy of static assets to each of these proxy servers within your CDN network, and they can handle local requests until the assets are no longer “fresh”. Some common CDN providers include Rackspace, Akamai, and Amazon Web Services.

What about browser caching?

Now, people across the country (or the world) can bring home cold milk from your farm. There’s just one issue — they have no way to store it in their own homes. Your customers still need to drink the milk pretty quickly after they buy it, and then return to the grocery store for more. So, this system still doesn’t serve customers particularly well.

The solution? A refrigerator!

With a fridge, you can store the milk locally and avoid a return trip to the supermarket. In caching terms, we’re talking about a completely separate location for storing static assets since it is on the client-side, or on the same computer as the browser. Our proxy server was located in a remote location.

This is great for sites like Facebook or Amazon that you might frequently visit. It’s great for their server costs too, since they can reduce the number of requests they need to handle.

One key thing to note — we are NOT saying that milk magically arrives in your refrigerator! You still need to make that initial request that reaches either the server or the proxy server. After that, you can cache some of the files locally.

How does your browser know when to request new files from the server? Otherwise, you would never experience updated versions of these local files.

Well, just like milk producers put a date on their milk packaging, servers will add some sort of identifier within the HTTP response header. There are actually 4 separate systems for HTTP caching. The scenario shown above closely resembles the “expiration date” method. Some of the other methods still require your browser to check with the server before sending the cached file.

When To Start Using Caching

Let’s say that you are building your first web app. Until you have thousands of users, you probably won’t need to worry about caching protocols, since server costs will still be low. However, as you scale up, you will need to implement caching if you want your app to load quickly.

Heroku, for example, is a great tool for deploying your first web app. But, it requires you to use a separate service to implement caching, like Amazon’s CloudFront or CloudFlare. That will take more time to learn.

On the browser-side, you have probably experienced caching when you are trying to reload a page with new static assets, but the page simply won’t change. No matter how many times you refresh the page, nothing changes.

This is usually because of some caching protocol on the browser-side. To bypass your browser’s cache and request new assets from the server, you can use Cmd+Shift+R on a Mac or Ctrl+Shift+R on PC.

Get More Visual Tutorials

Did you enjoy this tutorial? Check out the rest of my visual explanations of web development topics on the CodeAnalogies blog.

JavaScript’s Filter Function Explained By Applying To College

Kevin Kononenko — Sun, 03 Jun 2018 17:01:18 +0000

If you are familiar with the college application process, then you can understand JavaScript’s filter functions.

Compared to the map() and reduce() methods in JavaScript, the filter( )method has probably the most straightforward name.

You input an array, and you filter out the elements that fulfill a specific condition into a new array.

This seems simple, but I always seemed to find myself reverting to for() loops. So, I decided to find a better way to understand how filter() functions worked.

I realized that filter functions are kind of like a college admissions officer. They use a set of parameters to decide which students should be admitted to their particular college. Yes, we all wish that colleges were a little more flexible and judged our accomplishments holistically, but in reality, most still have hard numbers around SAT, ACT and GPA scores that determine who will be considered.

Let’s get into it!

Using A For Loop Instead of Filter Function

Okay, let’s say that we have an array of 4 students with names and GPAs. This particular college only wants to admit students with a 3.2 GPA or higher. Here is how you might do that.

let students = [
  { 
    name: "david", 
    GPA: 3.3 
  }, 
  { 
    name: "sheila", 
    GPA: 3.1 
  }, 
  { 
    name: "Alonzo", 
    GPA: 3.65 
  }, 
  { 
    name: "Mary", 
    GPA: 3.8 
  }
] 

let admitted =[]; 

for (let i=0; i < students.length; i++){ 
  if(students[i].gpa > 3.2) 
    admitted.push(students[i]); 
} 

/*admitted = [
  { 
    name: "david", 
    GPA: 3.3 
  }, 
  { 
    name: "Alonzo", 
    GPA: 3.65 
  }, 
  { 
    name: "Mary", 
    GPA: 3.8 
  }
];*/

Wow! That was way more complicated than it needed to be. If someone was reading over your code, they would need to track multiple arrays just to learn that you were simply filtering one array into another. And, you need to carefully track i as you go in order to avoid any bugs. Let’s learn how to use the filter method to accomplish the same thing.

Using the Filter() Method

Let’s learn how to accomplish the same goal with the filter() method.

Filter is an array method, so we will start with the array of students.
It uses a callback function that runs on each element in the array.
It uses a return statement to show which elements will actually end up in the final array, in this case, the admitted students.

let students = [
  { 
    name: "david", 
    GPA: 3.3 
  }, 
  { 
    name: "sheila", 
    GPA: 3.1 
  }, 
  { 
    name: "Alonzo", 
    GPA: 3.65 
  }, 
  { 
    name: "Mary", 
    GPA: 3.8 
  }
] 

let admitted = students.filter(function(student){
   return student.gpa > 3.2;
})

/*admitted = [
  { 
    name: "david", 
    GPA: 3.3 
  }, 
  { 
    name: "Alonzo", 
    GPA: 3.65 
  }, 
  { 
    name: "Mary", 
    GPA: 3.8 
  }
];*/

The inputs and outputs are the same, so here’s what we did differently:

We didn’t need to declare the admitted array and then fill it later. We declared it and then filled it with elements in the same code block
We actually used a condition within the return statement! That means that we only return elements that pass a certain condition.
We can now use student for each element in the array, rather than students[i] like we did in the for loop.

You may notice that one thing is counterintuitive- getting admitted to college is the last step, but in our code, the variable admitted is the first part of the statement! You might usually expect to find the final array as the last statement within the function. Instead, we use return to indicate which elements will end up in admitted.

Example 2- Using Two Conditions Within Filter

So far, we have just used one condition in our filter methods. But that does not represent the college admission process at all! Usually, admissions officers are looking at 10+ factors.

Let’s look at two factors- GPA and SAT scores. Students must have a GPA over 3.2 and an SAT score over 1900. Here is what the same function would look like.

let students = [
  {
    name: "david",
    GPA: 3.3,
    SAT: 2000
  },
  {
    name: "sheila",
    GPA: 3.1,
    SAT: 1600
  },
  {
    name: "Alonzo",
    GPA: 3.65,
    SAT: 1700
  },
  {
    name: "Mary",
    GPA: 3.8,
    SAT: 2100
  }
]

let admitted = students.filter(function(student){
   return student.gpa > 3.2 && student.SAT > 1900;
})

/*admitted = [
  {
    name: "david",
    GPA: 3.3,
    SAT: 2000
  },
  {
    name: "Mary",
    GPA: 3.8,
    SAT: 2100
  }
];*/

Looks pretty similar, right? Now we just have two conditions within the return statement. But let’s break that code down a bit further.

let admitted = students.filter(function(student){
   let goodStudent = student.gpa > 3.2 && student.SAT > 1900
   return goodStudent;
})

Aha! So here is another important difference when compared to for loops. If you check out the goodStudent variable, you can see that it will only evaluate to true or false. Then, that boolean is fed into the return statement.

So, that true or false really just decides if each member of the original array will be included or not in the resulting array, admitted.

Get More Visual Tutorials

Did you enjoy this tutorial? You will probably also enjoy my other visual explanations of web development topics on the CodeAnalogies blog.