The Window object provides a few methods that allow us to programmatically scroll around a web page, such as smooth scrolling to specific sections or returning the user to the top of the page.

Recently I used this on a project to create a "return to top" button that would appear once a user has begun scrolling down the page, and when clicked would quickly return the user to the top of the page.

![Scroll To Top Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0fu3nr0b5hvjsnbcvb13.gif)

### Getting Started

To begin, we first need to register the element that we want to use as the target for the scroll action. For a "return to top" this could be the heading of the page, or any other element at the top that you choose.  To register these elements using React Hooks, we will need to utilize the [useRef](https://reactwithhooks.netlify.app/docs/hooks-reference.html#useref) hook to register the element.

First create the marker:
```js
  const topRef = useRef(null);
```
Second, attach it to the desired element using its `ref` attribute:
```js
    <div className="App">
      <h1 ref={topRef}>Scroll To Top Example</h1>
    </div>
```

### Creating the Button

For the button itself, we can create a new component and assign a `scrollToRef` function to its click event. This function takes will accept the target ref, and use the `scrollTo()` function on the `window` object to scroll the window until the top of the `ref` element  is visible. To make this action smooth, instead of an instantaneous jump, we can optionally pass a "behavior" property:

```js
  const scrollToRef = (target) => {
    window.scrollTo({ 
      top: target.current.offsetTop, 
      behavior: "smooth" 
    });
  }
```

### Conditionally Rendering the Button

In my implementation, I wanted the button to only render once the user has scrolled a pre-defined distance down the page. To achieve this, we can utilize the `scrollY` property on the `window` object to determine how far down the page the user has scroll. With an event listener on the scroll event for the window, we can then compare the scrollY position of the window at each scroll to determine if the button's "show" state should be true or false. Alternatively, we could make this comparison on scroll start or scroll end to improve performance, but it would change its behavior.

Since the button will be mounted/unmounted conditionally, its important to remove the scroll event listener from the window object when the button is unmounted. To do this, we can return a cleanup function using the `useEffect` hook that will be invoked when the component un-mounts.

```js
const GoToButton = ({ displayAfter, target }) => {
  const [showButton, setShowButton] = useState(false);
  const handleShowButton = () => {
    if (!showButton && window.scrollY > displayAfter) {
      setShowButton(true);
      return;
    }
    if (!showButton && window.scrollY <= displayAfter) {
      setShowButton(false);
      return;
    }
  };
  window.addEventListener("scroll", handleShowButton);

  useEffect(() => {
    return window.removeEventListener("scroll", handleShowButton);
  });

  const scrollToRef = (target) => {
    window.scrollTo({
      top: target.current.offsetTop,
      behavior: "smooth"
    });
  };

  if (showButton) {
    return <Button onClick={() => scrollToRef(target)}>TOP</Button>;
  } else {
    return "";
  }
};
export default GoToButton;
```
### Conclusion

Similar approaches could be used to scroll down the page to different sections using a content menu and multiple section refs. The window object also has a `scrollBy` method which could be used in place of scrollTo if the desired behavior was to always scroll a specific distance, such as using `window.scrollBy(0, window.innerHeight)
` to scroll down by one page.

The code for the demonstration of this scroll to top feature in the animation can be found on this [CodeSandbox](https://codesandbox.io/s/kind-chaum-3kk0u?file=/src/GoToButton.js:86-872)

![Scroll To Top Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0fu3nr0b5hvjsnbcvb13.gif)

### Resources:
- [Window.scrollTo() documentation](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo)
- [Window.scrollBy() documentation](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollBy)
- [useRef Documentation](https://reactwithhooks.netlify.app/docs/hooks-reference.html#useref)


The Window object provides a few methods that allow us to programmatically scroll around a web page,...

Implementing a Scroll To Top feature in React

Daniel Sasse

[Last week in Algorithm Tutorials](https://dev.to/dsasse07/what-the-heap-utilizing-a-priority-queue-25j9), I discussed the Heap data structure, and how it is used to make an optimized data structure for retrieving the max/min value of a series and being able to quickly re-prioritize itself as new values are added in use cases such as a priority queue.

As suggested by @aminmansuri in the comments last week, the amazing properties of a heap do not end here. Let's examine `heapify` and `heapSort`. If you are unfamiliar with the heap structure, and the `bubbleUp` and `trickleDown` manipulations it requires, please first read [my previous post](https://dev.to/dsasse07/what-the-heap-utilizing-a-priority-queue-25j9)

## Contents
* [Heapify](#heapify)
  * [Three Approaches](#three-approaches)
  * [Measuring Efficiency](#measuring-efficiency)
  * [Heapify Implementation](#heapify-implementation)
* [Heap Sort](#heap-sort)
* [Resources](#resources)
* [MaxHeap Class Gist](#maxheap-class-gist)

### Heapify

_Heapify_ describes the act of taking an existing, unordered array, and transforming it into a Heap structure. What makes this process intriguing, is that if implemented well, it can be done in place, meaning O(1) space, and in linear, O(n), time versus the expected O(n log n) time.

#### Three Approaches
To _heapify_ an existing array, we could take one of three approaches:

> 1) We create a new empty heap, and then iterate through the array, inserting each element of the array into this heap using the `insert` and `bubbleUp` functions described in the [previous entry](https://dev.to/dsasse07/what-the-heap-utilizing-a-priority-queue-25j9). The drawback to this approach, is that not only are we creating an entirely new structure to hold each value, O(n) space, we also need to iterate through each item in the array, O(n), and insert each one, O(log n), which creates an overall time complexity of O(n log n). It works, but we can do better.

To improve our space usage, we would need to create the heap by modifying the existing array elements, and shuffling them within this array as needed using the `bubbleUp()` or `trickleDown()` methods.

> 2) Our first option would be to start at the first item in the array (root of the tree), and iterate through each element and invoking `bubbleUp` on each one. This would compare each node against its ancestors, and move it further up the tree as necessary. By the time we finish with the last element in the array, each element will have been placed accordingly and we will have our heap.

> 3) The other option, is to start at the bottom-most node on the tree _that has children_ and iterate up to the root, calling `trickleDown` on each one. Like the previous option, this would leave each element correctly place once we finish with the root node.

To compare the efficiency of option 2 and 3 above, we need to closely examine the structure of a heap to see how many potential swaps would need to occur for a given node, and how many nodes could be required to do those swaps. 

#### Measuring Efficiency

Let's use a 15 node tree as an example. Mathematically, we can calculate the number of tiers in any tree with `log n` where n is the number of nodes. In this case, that means 4 tiers. Using the approach in option 2, we could find the worst case total number of swaps by looking at the distance from a node's tier to the root.

![15 Node Binary Tree](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cigpv55gmsltbxu7ocni.png)

Ex: 
- 1 node would have 0 swaps (already the root)
- 2 nodes on tier 2 could have 1 swap to reach the root
- 4 nodes on tier 3 could have 2 swaps to reach the root
- 8 nodes on tier 4 could have 3 swaps to reach the root

Here we can quickly see that as the tree becomes deeper, the number of potential swaps grows quickly since in a tree structure _half of the nodes_ can be in the bottom tier of the tree and will need to potentially swap with the entire depth of the tree. Ultimately, this can be modeled by `n/2 * log n` for any given tier, which simplifies to O(n log n) like option 1, but without the extra needed space.

For comparison, if we used the approach in option 3 and call `trickleDown` on each node, the "swap count" would look very different for our 16 node tree:

Ex: 
- 1 node at the root could have 3 swaps to reach the bottom
- 2 nodes on tier 2 could have 2 swaps to reach the bottom
- 4 nodes on tier 3 could have 1 swaps to reach the bottom
- 8 nodes on tier 4 have 0 swaps( already at the bottom)

Here it should be immediately clear that for up to half of the nodes of the tree, no action is necessary, and would thus be more efficient than using option 2 and `bubbleUp`. Mathematically, this process comes out to O(n) time and is supported by [this proof provided by Jeremy West](https://stackoverflow.com/questions/9755721/how-can-building-a-heap-be-on-time-complexity
). With this process, we can turn any array into a heap without extra space, and in constant time.

#### Heapify Implementation

To efficiently implement heapify, we need to first find the last node in the tree that has children, and call `trickleDown` for each node from there to the root. We can find this node by using `Math.floor((n - 2)/2)`. Unlike in the previous blog, we want the `trickleDown` action to begin at the specified node, and not always at the root, so I have refactored `trickleDown` to accept an optional parameters compared to the implementation in my previous post. See the [full MaxHeap class gist below](#maxheap-class-gist) for the `trickleDown` implementation and the rest of the MaxHeap class implementation.

```js
class MaxHeap {
 constructor(arr = []){
    this.values = this._heapify(arr)
 }
 _heapify(arr){
    if (this.size > 0) return // Optional: Prevent overriding existing heap values
    this.size = arr.length
    /** 
    * To prevent mutating current array, copy arr with
    * this.values = [...arr]
    */
    this.values = arr 
    const nodeCount = this.size - 1
    // Finds the last node of the tree that has children
    let cIdx = Math.floor((nodeCount - 2)/2)
    /** For each node up through the root, 
    * call trickleDown
    */
    for (let i = cIdx; i >= 0; i--){
      this._trickleDown(i)
    }
    return this.values
  }
  // See gist for rest of class implementation
}
```

If we applied created a heap instance with `arr = [17,2,36,100,7,1,19,25,3]` we could model the `heapify` action as such:

![Heapify Animation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n6bxwph6auhpuis9ldsb.gif)

### Heap Sort

Heap sort is a sorting method that utilizes the heapify action we built above to sort array using constant space and O(n log n) time. There are essentially two phases to this sorting method:
1) Heapify the array
2) Iterate through the length of the array and for each index put the max value from the heap and place it at the end of the array.

Utilizing what we have already discussed with heapify above, and extraction from the previous post, this action is fairly similar. The major difference is that during extraction we do not want to remove a value from the array with `.pop`, nor do we always want to move the extract value to the last index of the array each time. Instead we can use an index pointer to determine where to place the max value, and where to stop the `trickleDown`

```js
  static heapSort(arr){
    const heap = new MaxHeap(arr)
    for (let i = arr.length - 1; i > 0; i--){
      // Place max at pointer position by swapping with root
      heap._swap(0,i)
      // Begin trickle at root, end before placed value
      heap._trickleDown(0, i)
    }
    return heap.values
  }
```

### Resources

These resources below were helpful in putting together this post, and will be helpful if you wish to dig further!

* [Evaluating Heapify Time Complexity](https://stackoverflow.com/questions/9755721/how-can-building-a-heap-be-on-time-complexity)
* [Heapify & Heap Sort](https://catherine-leung.gitbook.io/data-strutures-and-algorithms/sorting/heap-and-heap-sort/heap-sort)
* [Heapify Animation](https://docs.google.com/presentation/d/1muv9PFsfk9H_V9PysBhVEy2djXcbK55NHM0-NVsIYgs/edit?usp=sharing)

#### MaxHeap Class Gist

{% gist https://gist.github.com/dsasse07/7795bf6255f9ef518998fab604b854aa %}

Last week in Algorithm Tutorials, I discussed the Heap data structure, and how it is used to make an...

Algorithm Tutorial: Intro to Heaps - Heapify & Heap Sort

In this edition of the Algorithm Tutorial series, we're going to break down the [Heap data structure](https://en.wikipedia.org/wiki/Heap_%28data_structure%29) and and its utilization to implement a priority queue. 

## Contents
* [Background](#background)
* [Heap Structure](#the-structure)
* [Implementation](#implementation)
  * [Initialization](#initialization)
  * [Inserting Values](#inserting-values)
  * [Extracting Values](#extracting-values)
  * [As a Priority Queue](#as-a-priority-queue)
* [Full Code](#full-code)

### Background

Imagine you had a list of values that you had to operate on, and needed to use the values from greatest to least or vice versa. A simple approach, would be to sort the list, and then proceed in the desired order. However, this can become more complicated if new values are continually added to the list, requiring the list to be reordered before you can proceed. Since re-sorting the listed could potentially require comparing the new value to every other entry element in the list, this can become a slow process as the list grows.

Secondly, imagine the waiting area of an emergency room. As new patients come in, they could simply be added to a queue to wait and see a doctor, however this wouldn't account for the patient's severity of symptoms. A patient suffering from a heart attack, should clearly be a higher __priority__ than someone with a broken toe and should be helped first, even if they joined the queue last. How to we adjust our list/queue to account for priority, despite when it was added?

### Heap Structure

What makes a heap faster and more efficient than simply resorting a list over and over is its tree based structure according to its heap property (_max_ or _min_). In a max heap, the root of the tree will always be the element with the maximum value being used to compare, and for each node of the tree the children of a node must be less than or equal to the value of the node.

![Tree Representation of a Heap](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/trp21m9bqyee86o351xh.png)

Above, we see a model of a common heap implementation called a __binary heap__, specifically a _max_ heap. If we imagine a new value of 200 being added to the end of the queue (bottom of the tree), instead of comparing it to every other value as you would when sorting an array, you would only need to compare it to its parent to determine if it should be higher in the queue or remain where it is. Utilizing this, it becomes significantly more efficient to insert new values into our heap at the correct position. In terms of Big O notation, this insertion process would be modeled as O(log n) since we have to make _at most_ one comparison per tier of the tree, whereas comparing potentially every item, O(n), if we were inserting into an already sorted list.

In terms of working with a heap, the process will vary depending on the language. Python, for example, has the [heapq library](https://docs.python.org/3/library/heapq.html) which can be imported and worked with immediately, however in Javascript there is no native Heap data structure and it must be implemented manually. Let's walk through how this could be done in Javascript.

### Implementation
#### Initialization
To implement a binary max heap in Javascript, we'll start by defining a new class `MaxHeap` with a value property of an empty array. We can optionally initialize a `size` property to keep count of the number of values in our heap to improve the readability of future code instead of having to write `this.values.length` each time.

```js
class MaxHeap {
  constructor(){
    this.values = []
    this.size = 0
  }
}
```

> __If a heap is a tree structure, why are we initializing the heap with an empty array?__

Any binary tree structure can be stored as an array (as opposed to creating a Tree class) due to the relationship between the index of any single node and both of its child nodes as shown below.

![Binary Heap Tree vs Array Structures Comparison](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dj55btwp6nbg8gbl96xw.png)

For any node `n`, we can calculate the index of:
* Its left child = `2 * n + 1`
* Its right child = `2 * n + 2`
* Its parent = `Math.floor( (n - 1) / 2 )`

For example, the root node has an index of 0, with its left child being `1` and its right child being `2`. Node `2`s children would be at indices `5` and `6`.

#### Inserting Values

To add values to the heap, we will add them to the next empty position in the heap. In the tree structure, this means the value will be in the bottom tier of the tree, in the left-most empty child spot. Comparing this to the array structure, we will be adding it to the end of the array( think `.push()` ). Once the value is in the heap, we need to compare it to its parent node(s) and we will swap this new node with its parent if the heap property is currently being violated. 

For instance, in the previous example of inserting 200 into the max heap we would need continue swapping 200 with each parent value until it reached the root since 200 would be the largest value in the entire heap. In the case of a __priority queue__ we would use a similar swap pattern, but we would compare whatever property we define for the priority. This process of swapping the node upwards through the heap goes by a number of names, but I will refer to it as "bubbling up".

Here is an implementation of how we can insert a new value into the heap. If more than one value is in the heap, we will `bubbleUp()`, moving the newest value to its correct position:

```js
class MaxHeap {
  constructor(){
    this.values = []
    this.size = 0
  }
  
  insert(value){
    // If no value, do nothing
    if (value === undefined) return
    // Insert the value, and increment the size of the heap
    this.values.push(value)
    this.size++
    // Check to see if there is not more than 1 item in the heap
    // If there is only 1 item, there is no need to bubble up
    if (this.size > 1) this._bubbleUp()
    return this.values
  }
  
  _bubbleUp(){
    // Grab the most recently added value and its parent
    let currentIndex = this.size - 1
    let parentIndex = Math.floor( (currentIndex - 1) / 2 )
    
    // Swap the new node with its parent until the new node either
    // becomes the root, or is no longer greater than its parent
    while (parentIndex >= 0 && this.values[currentIndex] > this.values[parentIndex]){
      this._swap(currentIndex, parentIndex)
      currentIndex = parentIndex
      parentIndex = Math.floor((currentIndex - 1) / 2 )
    }
  }
  
  // Helper function using object destructuring to swap the elements at two indices
  _swap(index1, index2){
    [this.values[index1], this.values[index2]] = [this.values[index2], this.values[index1]]
  }
}
```

Example: 
```js 
const heap = new MaxHeap()
const values = [17,2,36,100,7,1,19,25,3,]

for (let val of values){
    heap.insert(val) 
}   
// Resulting Heap: [100, 36, 19, 25, 7, 1, 17, 2, 3]
```

#### Extracting Values

The purpose of using a heap in this fashion, is to quickly access the max/min value (or the value with the max/mix priority) depending on whether you are using a max or min heap. Because of how it is structure and the "bubbling" mechanism, this value will always be the first item in the heap array we have created, and this is the value we want to extract.

The problem we have, is that if we simply removed the first item in an array with `unshift()`, the entire array would need to be reindexed, as each index would need to be reassigned a new value. The only way to avoid this re-indexing, is if we removed the last item in a list, which is what we will do here by swapping the first and last items in the heap and then extracting.

Initially after the swap, the rule governing the heap (max/min) will be violated, and we must restore it similar to how we "bubbled up" before. In this case, we will need to compare this new out-of-place value with each of its children, and cause it to "trickle down" until it the heap rule is restored. This process is also sometimes referred to as "sifting down". As we compare the node with each of its children, we will swap with whichever child is greater (in max heap) or lesser (in min heap).

```js
class MaxHeap {
 /**
 *
 */
  
  extract(){
    if (this.size === 0) return
    // Swap the value to be extracted (root) with the last item in the heap
    const lastIndex = this.size - 1
    this._swap(0, lastIndex)
    // Remove the value to be extracted 
    const extractValue = this.values.pop()
    this.size--
    // If there is more than one remaining value, we must restore the heap rule
    if (this.size > 1) this._trickleDown()
    return extractValue
  }
  
  _trickleDown(){
    let currentIndex = 0
    /** 
    * These will be the indexes corresponding to the left and right 
    * child of the node at currentIndex
    * swapIdx will be which of the children the currentIndex will
    * actually switch with, if any
    */
    let leftIdx, rightIdx, swapIdx
    while (true) {
        leftIdx = 2 * currentIndex + 1
        rightIdx = 2 * currentIndex + 2
        swapIdx = null
        /**
        * If there is a valid left child and it is greater than the current value,
        * prepare to swap it
        */
        if (
          leftIdx < this.size &&
          this.values[currentIndex] < this.values[leftIdx]
        ) {
          swapIdx = leftIdx
        }
        /**
        * If there is a valid right child and it is greater than the current value,
        * prepare to swap it if we haven't already prepared to swap with left child.
        * If we have prepared to swap with left child, we should only choose to swapIdx
        * with the right child instead if it is greater than the left child, meaning
        * it better fits the heap rule
        */
        if (
          rightIdx < this.size &&
          ((swapIdx === null &&
            this.values[currentIndex] < this.values[rightIdx]) ||
           (swapIdx !== null && 
            this.values[rightIdx] > this.values[leftIdx]))
        ) {
          swapIdx = rightIdx
        }
        if (swapIdx === null) break // If no possible swap was ID'd, we're done
        // Swap the parent with the identified child, update the currentIndex, and repeat
        this._swap(currentIndex, swapIdx)
        currentIndex = swapIdx
    }
  }
}
```
Example Extraction using previously created heap:

```js
heap.extract() // 100
heap.values // [36, 25, 19, 3, 7, 1, 17, 2]
heap.extract() // 36
heap.values // [25, 7, 19, 3, 2, 1, 17]
heap.extract() // 25
heap.values // [19, 7, 17, 3, 2, 1]
```

#### As a Priority Queue

In the emergency room example discussed in the introduction, it would be impractical to keep track of the order to see patients just by the order that they arrived. It makes sense then, to use a priority queue, where the next patient to be seen is the one with the most urgent needs, regardless of when they entered the queue. This is a perfect use case for a heap, but instead of each element in the heap being just a number, there will likely be other information such as a patient name or id#. In this case, when we insert the value into the heap, we could insert it as an object with a key:value pairs for the patient and the priority level. We would then need to adjust the `bubbleUp()` and `trickleDown()` methods to compare the value of the priority key for each element.

### Full Code

Combining the code above, below you will find two full samples of heap implementation. The first is for a maxHeap based on the value of the element. The second would be a possible implementation for a __maxHeap priority queue_ where the values will be placed according with the highest priority numbers being the first to extract.

{% gist
https://gist.github.com/dsasse07/e5fadc14f0af2216c49ec25f11020907
%}

In this edition of the Algorithm Tutorial series, we're going to break down the Heap data structure...

Algorithm Tutorial: Intro to Heaps and Priority Queue Implementation

For this entry in my algorithm walkthrough series, we will be looking at a 2D matrix search using a [depth-first search](https://en.wikipedia.org/wiki/Depth-first_search) approach.

We will first discuss the the problem, the solution, and then use a visualizer I created ([and teased about in my last blog](https://dev.to/dsasse07/wait-for-it-implementing-a-sleep-function-in-js-2oac)) to better understand the search process.

## Contents
* [Problem Description](#problem-description)
* [Problem Explanation](#problem-explanation)
* [Solution](#solution)
  * [Modeling the Solution](#modeling-the-solution)

### Problem Description
The specific problem we will be walking through, is problem [Leetcode #695: Max Area of Island](https://leetcode.com/problems/max-area-of-island/). The direct problem description found on Leetcode is:

>You are given an m x n binary matrix grid. An island is a group of 1's (representing land) connected 4-directionally (horizontal or vertical.) You may assume all four edges of the grid are surrounded by water.

>The area of an island is the number of cells with a value 1 in the island.

>Return the maximum area of an island in grid. If there is no island, return 0.

For example, the grid of:
```js
grid = {[
[0,0,1,0,0,0,0,1,0,0,0,0,0],
[0,0,0,0,0,0,0,1,1,1,0,0,0],
[0,1,1,0,1,0,0,0,0,0,0,0,0],
[0,1,0,0,1,1,0,0,1,0,1,0,0],
[0,1,0,0,1,1,0,0,1,1,1,0,0],
[0,0,0,0,0,0,0,0,0,0,1,0,0],
[0,0,0,0,0,0,0,1,1,1,0,0,0],
[0,0,0,0,0,0,0,1,1,0,0,0,0]]
}
```
Would return a value of 6, not 11, since the largest area of consecutive tiles in orthogonal directions is only 6, with the additional 5 tiles being connected diagonally, and thus considered a separate island. Leetcode provided this model to demonstrate the example:

![Leetcode Island Model](https://assets.leetcode.com/uploads/2021/05/01/maxarea1-grid.jpg)

[Back to Top](#contents)

### Problem Explanation

If we were to perform this task mentally, the general approach would be to pick a starting point on an island, and then count each land tile that is connected to the current one, without repeating. If the island had different peninsulas or branches, we could count all of the land tiles in one peninsula before counting the rest of the tiles in the other. 

This mental model is the exact process we can replicate with a depth first solution, previewed below:

![DFS Visual](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cdb2qlb1j9c0nz0r393n.gif)

In implementing this approach, we will need to:
* Iterate through the grid until we reach a "land tile".
  1. Count the tile and then somehow make note that we have visited this tile so that it doesn't get counted multiple times.
  2. Look at each orthogonal neighbor of that land tile to see if any of them are also land AND have not yet been visited.
  3. Add each unvisited land tile to the stack (a list of tiles we need check for additional neighbors)
  4. Repeat from step 2 by removing and using the most recently added item from the stack until there are no items remaining in the stack (meaning there are no more unvisited land tiles orthogonal to the current island)
* Once the first island is done being mapped, we update a `maxArea` variable to be whichever is greater: the result of the most recent island, or the previous value of maxArea.
* Continue iterating through the grid until we reach another land tile that __has not already been visited__, indicating a new island is present.

The second consideration that must be made, is how to keep track the land tiles that have already been visited: 
* One answer would be to create a `visited` array, or object and add the coordinate pair for each land tile as it is counted. You would then need to check within this `visited` object to see if it already includes those coordinates. The advantages to this approach, are that it doesn't mutate the original grid, however more memory is going to be required for the function since we will be creating a new object. 
* A second option, would be to change the value of land tile once it has been counted. In this problem, 1 denotes land. After a tile has been counted, we could change it to 0 (water) or any other value. As long as we are looking for 1's in the grid, these already visited tiles will not get re-used. This has the inverse effects from the previous solution, where we save space on a `visited` object, but the original grid will be mutated.

For my solution, I chose to mutate the grid, in particular because assigning different values based on a tiles "status" would allow me to model them different in a visualizer.

[Back to Top](#contents)

### Solution

Using the pseudo-code in the previous section, we can implement the `mapAreaOfIsland` function in Javascript as shown below:

```js
const maxAreaOfIsland = grid => {
  let maxArea = 0

  const mapIsland = (i, j) => {
    const stack = [[i, j]]
    let islandSize = 0
/*
These coordinates correspond to the four 
orthogonal changes from the current position
*/
    const directions = [[-1,0], [1,0], [0,1], [0,-1]]
    
    while (stack.length > 0){
      const tile = stack.pop()
      islandSize++
/*
For each of the four orthogonal directions, 
get the row and column index the change corresponds 
to and evaluate that tile.
*/
      for (const dir of directions){
        let nextRow = tile[0] + dir[0]
        let nextCol = tile[1] + dir[1]
        if ( grid[nextRow] && grid[nextRow][nextCol] && grid[nextRow][nextCol] === 1 ){
/*
If the tile is part of the grid, and its a land tile, 
we will change its value so that it doesn't get re-counted, and add these coordinates to the stack.
*/
          grid[nextRow][nextCol] = 3
          stack.push([nextRow, nextCol])
        }
      }
    }
    return islandSize
  }

  for (let i = 0; i < grid.length; i++){
    for (let j = 0; j < grid[0].length; j++){
      if (grid[i][j] === 1){
/* 
We found the starting point for our island, mark this point as visited, 
and then begin scanning the island. 
The returned size will be compared to the current maxArea to 
determine which is greater and update the value of maxArea if needed.
*/
        grid[i][j] = 3
        maxArea = Math.max(maxArea, mapIsland(i, j))
      }
    }
  }
  return maxArea
};
```
### Modeling the Solution

For myself, it often helps to have a visual model of a process that illustrates the steps that are occurring. To further my own understanding, and to hopefully help you, I [created a visualizer using CodeSandbox](https://codesandbox.io/s/algo-visualizer-4on1s?file=/src/useGridDFSAnimation.js) To help model the depth first search.

In this visualizer, the solution implementation above was modified so that the current state of the tile: unvisited land, unvisited water, visited land, visited water, andpending (in the stack) was denoted by different numerical values. As  the state of the tile changed throughout the function, the value was updated leading to a visual change in the styling. Here is a preview of the search for the initial example grid:

![Grid 1 Search Model](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/exy2m7hrxt66x6dam64a.gif)

Other modifications to the solution that were needed to produce the visualizer included cloning the grid after each mutation in order to update the component state and re-render the component. The `sleep()` function described [in my last blog](https://dev.to/dsasse07/wait-for-it-implementing-a-sleep-function-in-js-2oac) allows us also to purposely slow down the solution in order to perceive and follow the search pattern. If you would like to change the speed of the visualizer, you can adjust the `{sleep: }` option argument on line 31 where the custom hook is invoked.

Aside from the three pre-defined grids, I also added acreate a custom map feature to create different scenarios to run the search on. Enter the number of rows/columns you'd like, and then click a tile to toggle it as land or water. After selecting "Use this map" you can search against this one shown below:

![Custom Grid Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/883ocoo1xp1abnbdstnd.gif)





For this entry in my algorithm walkthrough series, we will be looking at a 2D matrix search using a...

Algorithm Tutorial: Max Area of an Island (DFS)

[In my last blog entry](https://dev.to/dsasse07/algorithm-practice-champagne-tower-explanation-414h), I had created a visualizer to model an approach to solving a Leetcode algorithm problem. I had planned to create a second entry in that series this week, however I ran into an obstacle:

_How do I slow down the operation speed of a function to the point where I could create visual models and allow the viewer time to process them before it updated to the next step?_

Most program languages have a `sleep` function/method that can be invoked to delay the next operation in a function. For example, Ruby has `sleep(1000)` and Python has `time.sleep(1)` to "pause" operation for 1 second, but there is no direct correlate in Javascript.

## setTimeout and setInterval
Asynchronous actions in Javascript can usually call upon one of these two functions. [setTimeout](https://www.w3schools.com/jsref/met_win_settimeout.asp) allows us to wait a specified amount of time before invoking a new callback function with [setInterval](https://www.w3schools.com/jsref/met_win_setinterval.asp) operating similarly except the delay will reset and continue repeating.

For the purposes of slowing down operation for something like a `while` loop, neither of these are directly helpful since they delay the invocation of a new action rather than the delay the original function in which they were called.

## Incorporating Promises
In Javascript, a [Promise object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) represents the eventual completion of an action. For example, if you have ever worked with an API call and made a request to the server, that request returns a "pending" Promise that will ultimately become "resolved" or "rejected". When creating a new Promise object, we can pass in two callback functions as arguments. The first argument is the function that will be invoked when the Promise is resolved, and the second (optional) is invoked if the Promise is rejected.

### Example: 
```js
const sleep = (ms) => {
  return new Promise((resolve) => setTimeout(resolve, ms));
};
```

In the example above, the function accepts a single parameter which will reflect the time in milliseconds that we would like the function to sleep for. We then create a new Promise object and use `setTimeout` in the callback function for the resolution of the Promise. We do not need a callback for the Promise reject here, as this will never arise in this use case.

`setTimeout` itself takes in two arguments: a callback function and a duration in milliseconds in which to delay invoking the callback. For the delay, we simply pass the `ms` parameter of the sleep function. For the callback, we will use the resolve action of the Promise. This means that the state of the Promise will not be set to resolved until that delay time has passed.

## Usage

With the `async`/`await` keywords in our functions, we can tell a function to "await" the resolution of a Promise before continuing its next action. If we combine this with a setTimeout action, we can effectively create a `sleep()` function in Javascript.

Example:

```js
const sleep = (ms) => {
  return new Promise((resolve) => setTimeout(resolve, ms));
};

const action = async () => {
    for (let i = 1; i < 5; i++){
        console.log(`Round ${i}`)
        console.log('Waiting for 500ms')
        await sleep(500)
        console.log('Posting')
    }
}
```
In this example, the final operation of each iteration will not run until the promise from the `sleep()` function has been resolved.

![Sleep Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uwzcrintrj0kzgaeq7h1.gif)

Initially the uses for this action compared a "regular" timeout or interval may seem limited. However, this allowed me to solve my initial challenge of trying to visualize the progress of an algorithm solution to create a visualizer. Normally, the speed at which a function runs would make it impossible for a viewer to see the incremental changes in values or current positions in a traversal. However, if we render a component, and provide a brief `sleep` in each iteration it allows the user to view the changes occurring at each step.

For example, we can visualize a depth first search process through a grid to map out the "land area" of islands in an "ocean":

![Island Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/far0edws3l49o1wyeyjg.gif)

Hopefully this implementation of a sleep function opens up new options for you in your coding. More information on the mapping algorithm above and the visualizer itself will come next week!




In my last blog entry, I had created a visualizer to model an approach to solving a Leetcode algorith...

Wait for it: Implementing a sleep() function in JS

Lately I have been reviewing and practicing with data structures and algorithms. I decided to begin a short series of solution walkthroughs for interesting problems I've encountered to supplement my normal tutorial guides.

Today, let's walk through the cascading champagne tower problem from [Leetcode (#799)](https://leetcode.com/problems/champagne-tower/)

## Contents
* [Problem Description](#problem-description)
* [Problem Explanation](#problem-explanation)
 * [Modeling the Tower](#modeling-the-tower)
* [Solution](#solution)

### Problem Description

The direct problem description found on Leetcode is:

> We stack glasses in a pyramid, where the first row has 1 glass, the second row has 2 glasses, and so on until the 100th row.  Each glass holds one cup of champagne.

> Then, some champagne is poured into the first glass at the top.  When the topmost glass is full, any excess liquid poured will fall equally to the glass immediately to the left and right of it.  When those glasses become full, any excess champagne will fall equally to the left and right of those glasses, and so on.  (A glass at the bottom row has its excess champagne fall on the floor.)

> For example, after one cup of champagne is poured, the top most glass is full.  After two cups of champagne are poured, the two glasses on the second row are half full.  After three cups of champagne are poured, those two cups become full - there are 3 full glasses total now.  After four cups of champagne are poured, the third row has the middle glass half full, and the two outside glasses are a quarter full, as pictured below.

![Champagne Tower Model](https://s3-lc-upload.s3.amazonaws.com/uploads/2018/03/09/tower.png)

Essentially, this problem is modeling a waterfall cascade and is a variant of [Pascal's Triangle](https://en.wikipedia.org/wiki/Pascal%27s_triangle) in which each item in the Triangle is the sum of its "left parent" and "right parent". Here instead of the total sum, we need to calculate the total overflow sum.

[Back to Top](#contents)

### Problem Explanation

In reading through the problem description, we can get a sense of the cascade effect, and how the rows at the top of the tower affect those below it. However, given the row/column nature of the description, we should begin to think of the "champagne tower" as an array of arrays, where each index in the tower consists of an array whose length is one greater than the previous index:
Ex: `tower = [ [0], [0,0], [0,0,0], ... ]`

With this in mind, instead of picturing the tower as an equilateral triangle as shown in the diagram, lets re-envision the tower so that the indexes of each row are aligned (a right triangle) and see how their values relate to each other for the same first 4 pours described in the description.
```
One Pour:
[ 1 ], 
[ 0, 0 ], 
[ 0, 0, 0 ], 
[ 0, 0, 0, 0 ], 

Two Pours:
[ 1 ], 
[ 0.5, 0.5 ], 
[ 0  , 0  , 0 ], 
[ 0  , 0  , 0  , 0 ]

Three Pours:
[ 1 ], 
[ 1  , 1 ], 
[ 0  , 0  , 0 ], 
[ 0  , 0  , 0  , 0 ]

Four Pours:
[ 1 ], 
[ 1   , 1 ], 
[ 0.25, 0.5 , 0.25 ], 
[ 0   , 0   , 0   , 0 ]
```

If we look carefully at how the indexes of the "children" glasses for an overflowing "parent", we can see that one of the recipient children __has the same index__ and the other child is always __one greater than the current index__. This relationship will help us in the solution to determine where the "overflow" amount will be assigned to.

The second key thing to takeaway, as mentioned earlier, is that the children receive the __sum__ of the __overflow amount__ (unlike Pascal's triangle which is the full sum) __and__ this sum cannot exceed 1 or it too will overflow. This means that for each glass, we will need to compare how much liquid is poured into the cup (directly or via overflow) to how much can remain in the glass (1) to determine the overflow amount.

With these ideas in mind, let's write a function that constructs the tower for a given number of pours and rows. __This is not the final solution, or what the problem is ultimately asking for__ but I feel like it helps to visualize what is happening. 

[Back to Top](#contents)

#### Modeling the Tower:

This function will output the nested arrays that make up the entire tower up to the row number specified, with the amounts in each glass for the given number of pours. The comments within the function will explain each step in the process. I also [built a CodeSandbox visualizer](https://codesandbox.io/s/champagne-visualizer-6vu1b) for this model to help with understanding how the glasses/rows relate 

![Champagne Solution Visualizer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0cigjx4y0mck8hpzvirq.gif)

```js
const champagneFullTower = (poured, query_row) => {
  // Initialize the tower as a nested array representing the first cup.
  // This first cup is where all of the liquid poured initially goes.
  const tower = [[poured]]

  // Iterate for each row of the tower that we are modeling.
  // Access the current row, and initialize a new array for the next row
  for (let i = 0; i < query_row; i++){
    const currentRow = tower[i]
    const nextRow = []

    /*
    Iterate through each cup in the current row, calculating its fill and overflow.
    Its fill amount cannot exceed 1, so Math.min() will check for this.
    Calculate the overflow amount by subtracting 1 from the amount available.
    Overflow amount canot be negative, so Math.max() is used to ensure this.
    */
    for (let j = 0; j < currentRow.length; j++){
      const fillAmount = Math.min(1, currentRow[j])
      const overflowAmount = Math.max(0, currentRow[j] - 1)
      /*
      The two "child cups" each receive 1/2 of the overflow amount.
      This should accumulate with any amount it received from a different parent.
      || operator is used to handle the initial undefined state of each index.

      Remember, each parent overflows to the same index below it, and index + 1
      */
      nextRow[j] = nextRow[j] + overflowAmount / 2 || overflowAmount / 2
      nextRow[j+1] = nextRow[j+1] + overflowAmount / 2 || overflowAmount / 2
      currentRow[j] = fillAmount
    }
    // Add the row we just constructed to the tower
    tower.push(nextRow)
  }
  // Return the portion of the tower we processed
  return tower.slice(0, query_row)
}
```

[Back to Top](#contents)

### Solution

For the problem we are solving, we do not want to return the entire tower. Instead it is asking us to return the amount present in a given row or column. One way we could do this by modifying our return statement to return just the desired glass, ensuring that the maximum value returned is 1 (since we did not calculate overflows for the last row). We will also need to add in the `query_glass` parameter from Leetcode to identify the correct glass. This functionality is also modeled [on the visualizer](https://codesandbox.io/s/champagne-visualizer-6vu1b?file=/src/App.js) by clicking on any of the glasses.

```js
const champagneTower = (poured, query_row, query_glass) => {
  const tower = [[poured]]
  for (let i = 0; i < query_row; i++){
    const currentRow = tower[i]
    const nextRow = []

    for (let j = 0; j < currentRow.length; j++){
      const fillAmount = Math.min(1, currentRow[j])
      const overflowAmount = Math.max(0, currentRow[j] - 1)
      nextRow[j] = nextRow[j] + overflowAmount / 2 || overflowAmount / 2
      nextRow[j+1] = nextRow[j+1] + overflowAmount / 2 || overflowAmount / 2
      currentRow[j] = fillAmount
    }
    tower.push(nextRow)
  }
  // Math.min() ensures 1 is the highest returned value
  return Math.min(1, tower[query_row][query_glass])
}
```

Since we don't actually need to keep track of the entire tower to solve the problem, we could simplify the function a bit by only keeping track of the `currentRow` and `nextRow`:

```js
const champagneTower = (poured, query_row, query_glass) => {
  currentRow = [poured]
  for (let i = 0; i < query_row; i++){
    const nextRow = []
    for (let j = 0; j < currentRow.length; j++){
      const overflowAmount = Math.max(0, currentRow[j] - 1)
      nextRow[j] = nextRow[j] + overflowAmount / 2 || overflowAmount / 2
      nextRow[j+1] = nextRow[j+1] + overflowAmount / 2 || overflowAmount / 2
    }
    currentRow = nextRow
  }
  return Math.min(1, currentRow[query_glass])
}
```


[Back to Top](#contents)

Lately I have been reviewing and practicing with data structures and algorithms. I decided to begin a...

Algorithm Tutorial: Champagne Tower Explanation

A social share feature provides an easy method for users to share content from your web app/page directly to their social media accounts or via email/sms. This can help increase user engagement by facilitating the ability to share specific links, articles, and other content to attract more users.

For most social media outlets, this sharing action can be done by specifying different params in the `href` attribute of a link. This will allow you create a draft/template of the message that will get shared. Of course, the user will still have the option to edit the message before it is posted.

## Contents
* [Creating Share Links for Social Media](#creating-share-links-for-social-media)
* [Creating Share links for SMS and Email](#creating-share-links-for-sms-and-email)
 * [Email](#email)
 * [SMS](#sms)
* [Displaying the Links](#displaying-the-links)

### Creating Share Links for Social Media

The first step to implementing the social share feature is to obtain the properly formatted urls for the desired social media outlet. Let's examine what this would look like for Twitter.

```html
<a href="https://twitter.com/intent/tweet?url=https://dev.to/dsasse07/beginner-s-guide-to-jest-testing-in-react-1nig&text=Beginner's%20Guide%20to%20Jest%20Testing%20in%20React&via=dannysasse" target="_blank" rel="noreferrer">Share on Twitter</a>
```

- The first part of the url (https://twitter.com/intent/tweet) is the Twitter endpoint that will allow us to begin composing a Tweet.
- Following the endpoint, we see a series of params:
 - `url=https://dev.to/dsasse07/beginner-s-guide-to-jest-testing-in-react-1nig`
 - Indicates the url that will be highlighted within the Tweet. Twitter will unfurl this link in the tweet using the meta tags at this url.
 - `text=Beginner's%20Guide%20to%20Jest%20Testing%20in%20React`
  - The text content of the message that we would like to include in the template/draft of the Tweet. Note that this text, like all text in the url, must be URL encoded.
 - `via=@dannysasse`
  - The twitter handle that we would like to be tagged in the message. This could be an article author, or the twitter account related to your web app.

By providing each of these params into the `href` of our link, clicking on the link will open a new browser window to Twitter, and will precompose a tweet from whichever Twitter account is logged in on the device. All the user needs to do is press Tweet!

![Generated Tweet Preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i5atwhxupnqj3d9de4kg.png)

The difficult part about creating these social share links however, is that each social media outlet is free to format the sharing url endpoint and params as they choose. For example, Facebook's share format only accepts a single param `u=`.

```html
https://www.facebook.com/sharer.php?u=https://dev.to/dsasse07/beginner-s-guide-to-jest-testing-in-react-1nig
```

Fortunately, there are a [number of services available](https://www.coderstool.com/share-social-link-generator) that have these formats saved, and can be used to quickly generate the urls for different social media outlets.

### Creating Share links for SMS and Email

Creating share links for email and SMS fortunately have a uniform approach:

#### Email:
The most basic format for an email link uses the `mailto:` prefix followed by an email address. 

```html
<a href="mailto:someone@domain.com" />
```

When clicked, this link would begin a draft of a new email message to the email address included in the link. Multiple addresses can actually be listed here to include multiple addresses as recipients. This could be helpful for a service like a contact link, however as a social share feature we will not know the email address(es) of the recipients. Fortunately, we can leave the addresses blank, and instead fill in the other optional param fields `subject=` and `body=`. For completion sake, `cc=` and `bcc=` are also possible param fields, but we will not need them

To create an email link for the same example as above, it would look like this:

```html
<a href="mailto:?subject=Beginner's%20Guide%20to%20Jest%20Testing%20in%20React&body=https://dev.to/dsasse07/beginner-s-guide-to-jest-testing-in-react-1nig%20Check%20out%20this%20new%20article%20on%20Jest%20testing%20in%20React!" target="_blank" rel="noreferrer">Share on Email</a>
```

When clicked, this link would begin a draft of a new email with the address fields left blank. However the subject line will be pre-filled, and the email body will have the link pre-populated. Please Note, the subject and body must be URL encoded.

![Generated Email Template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p3mwl7p7uu320obqoxi2.png)

#### SMS

SMS links are formatted similar to emails, except use the prefix `sms:`. Like emails, the "address" following `sms:` (the phone number) value is optional. We will leave it blank for our share feature since we will not know the recipients phone number. In terms of other param fields, the only option for SMS is `body=` which will contain the content of the text message. Please note again, the body must be URL encoded.

Example:
```html
<a href="sms:?body=https://dev.to/dsasse07/beginner-s-guide-to-jest-testing-in-react-1nig" target="_blank" rel="noreferrer">Share on SMS</a>
```

It is worth noting that support for this link format is largely through mobile devices, and you may want to consider hiding the SMS share link when a user is not on a mobile device. Additionally, some systems do not fully support sms links. For example, some versions of iOS do not accept SMS links that contain a `body=` value.

### Displaying the Links

How you utilize these links and implement this feature will vary widely depending on the content that you are trying to share. For example, if you were implementing a share feature for each article on a page, perhaps you want to dynamically adjust the params to be relevant to each article. This might also mean that you use a sub-menu on each article or card.

For example purposes, I created a share action button that would display a series of floating action buttons, one for each link option using React and styled components. The code and working example can be found [on CodeSandbox](https://codesandbox.io/s/social-share-feature-example-8zgg4?file=/src/App.js:0-4346) or below the demo gif.

![Share Action Buttons](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hj71bxk6ow1sukn5n8av.gif)

```js
import "./styles.css";
import styled from "styled-components";
import LinkedInIcon from "@material-ui/icons/LinkedIn";
import FacebookIcon from "@material-ui/icons/Facebook";
import TwitterIcon from "@material-ui/icons/Twitter";
import MailOutlineIcon from "@material-ui/icons/MailOutline";
import SmsIcon from "@material-ui/icons/Sms";
import ShareIcon from "@material-ui/icons/Share";
import { useState } from "react";

export const socials = [
  {
    outlet: "LinkedIn",
    href:
      "https://www.linkedin.com/shareArticle?url=https://dev.to/dsasse07/beginner-s-guide-to-jest-testing-in-react-1nig&title=Beginner's%20Guide%20to%20Jest%20Testing%20in%20React",
    background: "#0a66c2",
    color: "white",
    label: "Share on LinkedIn",
    icon: <LinkedInIcon />
  },
  {
    outlet: "Facebook",
    href:
      "https://www.facebook.com/sharer.php?u=https://dev.to/dsasse07/beginner-s-guide-to-jest-testing-in-react-1nig",
    background: "#3b5898",
    color: "white",
    label: "Share on Facebook",
    icon: <FacebookIcon />
  },
  {
    outlet: "Twitter",
    href:
      "https://twitter.com/intent/tweet?url=https://dev.to/dsasse07/beginner-s-guide-to-jest-testing-in-react-1nig&text=Beginner's%20Guide%20to%20Jest%20Testing%20in%20React&via=dannysasse",
    background: "#00aced",
    color: "white",
    label: "Share on Twitter",
    icon: <TwitterIcon />
  },
  {
    outlet: "Email",
    href:
      "mailto:?subject=Beginner's%20Guide%20to%20Jest%20Testing%20in%20React&body=https://dev.to/dsasse07/beginner-s-guide-to-jest-testing-in-react-1nig%20Check%20out%20this%20new%20article%20on%20Jest%20testing%20in%20React!",
    background: "#dd4b39",
    color: "white",
    label: "Share via Email",
    icon: <MailOutlineIcon />
  },
  {
    outlet: "SMS",
    href:
      "sms:?body=https://dev.to/dsasse07/beginner-s-guide-to-jest-testing-in-react-1nig",
    background: "#7bcb20",
    color: "white",
    label: "Share via SMS",
    icon: <SmsIcon />
  }
];

export default function App() {
  const [menuActive, setMenuActive] = useState(false);
  const handleToggleMenu = () => {
    setMenuActive((menuActive) => !menuActive);
  };

  const socialLinks = socials.map((social, index) => {
    return (
      <SocialLink
        as="a"
        href={social.href}
        target="_blank"
        rel="noreferrer"
        aria-label={social.label}
        role="button"
        isActive={menuActive}
        background={social.background}
        color={social.color}
        position={index}
        key={index}
      >
        {social.icon}
      </SocialLink>
    );
  });

  return (
    <Container>
      <h1>Share Feature Implementation</h1>
      <h2>By: Danny Sasse</h2>
      <ShareContainer>
        <ShareButton
          isActive={menuActive}
          aria-label="Share Button"
          aria-expanded={menuActive}
          role="button"
          background="#242424"
          color="white"
          onClick={handleToggleMenu}
        >
          <ShareIcon />
        </ShareButton>
        {socialLinks}
      </ShareContainer>
    </Container>
  );
}

const Container = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: mistyrose;
  height: 100vh;
`;

const ShareContainer = styled.div`
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
`;
const ShareButton = styled.button`
  display: flex;
  z-index: 1;
  align-items: center;
  justify-content: center;
  background: ${({ background }) => background};
  color: ${({ color }) => color};
  border-radius: 100%;
  outline: none;
  border: 2px solid ${({ background }) => background};
  padding: 8px;
  transform: ${({ isActive }) => (isActive ? "scale(0.8)" : "scale(1.0)")};
  transition: all 0.2s, transform 0.2s 0.2s;
  :hover {
    background: white;
    color: ${({ background }) => background};
  }
`;

const SocialLink = styled(ShareButton)`
  position: absolute;
  z-index: 0;
  transform: none;
  transition: top 0.2s ${({ position }) => `${position * 50}ms`},
    left 0.2s ${({ position }) => `${position * 50}ms`};
  left: ${({ isActive, position }) =>
    isActive ? `${(-1) ** position * Math.ceil(position / 2) * 50}px` : "0"};
  top: ${({ isActive }) => (isActive ? `50px` : "0")};
  box-shadow: ${({ isActive }) => (isActive ? `0 4px 10px 0 gray` : `0`)};
`;

```


A social share feature provides an easy method for users to share content from your web app/page dire...

Implementing a Social Share Feature

In my last post, [A Beginner's Guide to Unit-testing with Jest](https://dev.to/dsasse07/a-beginner-s-guide-to-unit-testing-with-jest-45cc), I walked through getting started with testing in javascript using the Jest testing library. Here, I hope to expand on what was already discussed about matchers and expectations, and the purpose of test implementation with an example of how to write basic tests for React components.

Writing tests for React components with Jest follows the same similar structure of a `describe` function containing `test` blocks with `expect` functions and matchers. However, instead of testing the functionality of individual JS functions, we need to ensure that React components are rendering properly and that user interactions with the component occur as expected. For a detailed guide on the basic setup for Jest testing and it purposes, please see my previous post, [A Beginner's Guide to Unit-testing with Jest](https://dev.to/dsasse07/a-beginner-s-guide-to-unit-testing-with-jest-45cc).

### Getting Started

We will walk through the process of setting up a basic React App with interactive elements such as a counter with increment/decrement buttons, and a form to post text to the DOM. I will walk through writing the Jest tests and the rest of the code here, but you can view [the repo containing all of the code as well](https://github.com/dsasse07/jest-react-example).


## Contents
* [Setting Up The App](#setting-up-the-app)
* [Anatomy of the Default React Test](#anatomy-of-the-default-react-test)
* [Planning the Tests](#planning-the-tests)
* [Describe the Tests](#describe-the-tests)
 * [Counter Tests](#counter-tests)
 * [Form Tests](#form-tests)
* [Implementing the Component](#implementing-the-component)
* [Conclusion](#conclusion)
* [Resources](#resources)


## Setting Up The App 

__Steps:__
* Create a new react app, and `cd` into that directory.
* Jest is installed as a dependency to React when using `npx-create-react-app`, along with the React Testing Library. The React Testing Library provides additional functions to find and interact with DOM nodes of components. No additional installation or setup is needed when beginning your React app this way.

```sh
npx create-react-app jest-react-example
cd jest-react-example
```

## Anatomy of the Default Test

When a new React app is created using `npx-create-react-app`, the `App.js` file comes pre-filled with placeholder content and a test file is included for this by default - `App.test.js`. Let's walk through what happening in this test file:

```js
// App.test.js
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import '@testing-library/jest-dom/extend-expect';
import App from './App';

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});
```
1. We begin by importing two crucial functions from the React Testing Library: `render` and `screen`. 
  * `Render` is a function that will build the DOM tree in memory that would normally be rendered as a webpage. We will use this to turn our component code into the format that the user would be interacting with.
  * `Screen` is a an object with a number of querying functions that will allow us to target element(s) in the DOM. For comparison, it functions similarly to `querySelector`, however the syntax is a bit different since we will not be using an element's tag/class/id.

2. The next import, `userEvent` will allow us to simulate a variety of user actions with a targeted element, such as button presses, typing, etc.[The full documentation for userEvent can be found here](https://testing-library.com/docs/ecosystem-user-event)

3. The third import, `@testing-library/jest-dom/extend-expect`, provides additional matchers that we can use for targeted elements. [The full documentation for Jest-DOM can be found here](https://testing-library.com/docs/ecosystem-jest-dom)

4. Lastly, we need to import the component that we will be testing in this file.

With these imports completed, we see the familiar structure of a Jest test function.
```js
// Copied from above
test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});
```
- The test function is invoked with a `string` argument describing the test, and a callback function with the test content.
- The callback function first creates the DOM tree for the component by rendering the component.
- The `getByText` function of the `screen` object is invoked with a regular expression argument. The `getByText` function will return the first element in the DOM that has text matching the regular expression, which will then save to a variable for later use.
- The callback is completed with the `expect` and matcher statements. In this case, we are simply stating that we expect that our previous query found an element in the document.

If we start the app on the local machine using `npm start` we can see that the specified link text is clearly visible, and the default test should pass.

![Default React Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cmvy4qalvgoh9brdgvdx.png)

We can confirm that the default test is working before we move on to writing our own by running `npm test` in the console.

![Default App.test.js results](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4odho1umjxjo3mnfy2a4.png)

## Planning the Tests

Following Test-Driven Development, let's begin by defining what our App _should_ do, write the tests for it, and then implement the code that _should_ pass the tests.

* There will be two buttons: increment and decrement. 
 * When clicked, they should increase/decrease a counter on the page. 
 * The counter should never be negative, so the decrement button should be disabled when the counter is less than 1.

* There should be a form with an input field and a submit button. 
 * The user should be able to type into the field, and when submitted, the text from the field will display in a list on the screen.
 * Each list item will have a "remove" button, that when pressed should remove that item from the screen.

### Describe the Tests

Since the counter value will just be a number, I wanted to ensure that the query matches the counter value and not another number that is potentially on the page (as may happen with just using `getByText()`). For this, we can use the dataset attribute `data-testid` similar to how we use `id` in HTML. The difference is that `data-testid` is strictly for testing purposes and not related to CSS or other interactions.

#### Counter Tests

###### __Test #1:__
In this first test, I wrote the expectation statements to match the initial plan for the counter feature. We expect the DOM to include both buttons, the counter label "Counter: ", and the value of the counter. We would also expect that when the page is first loaded, the counter has a default text value of 0, and because of this, our decrement button should be disabled to not allow a negative counter value.

```js
describe( 'App Counter', () => {
  test('Counter Elements should be present', () => {
    render(<App />)
    const incrementButton = screen.getByText(/Increment/i)
    const decrementButton = screen.getByText(/Decrement/i)
    const counterLabel = screen.getByText(/Counter:/i)
    const counterText = screen.getByTestId("counter-value")
    
    expect(incrementButton).toBeInTheDocument()
    expect(incrementButton).toBeEnabled()
    expect(decrementButton).toBeInTheDocument()
    expect(decrementButton).toBeDisabled()
    expect(counterLabel).toBeInTheDocument()
    expect(counterText).toHaveTextContent(0)
  })
})
```

###### __Test #2__
For the counter, we expect that each time the increment button is pressed, the counter value should increase by 1. When the counter goes above zero, the decrement button should become enabled. To simulate a button press, we use the `click()` function in the `userEvent` object we had imported earlier.

```js
// Within the describe block from test #1
  test('Increment increases value by 1 and enables decrement button present', () => {
    render(<App />)
    const incrementButton = screen.getByText(/Increment/i)
    const decrementButton = screen.getByText(/Decrement/i)
    const counterText = screen.getByTestId("counter-value")

    expect(counterText).toHaveTextContent(0)
    userEvent.click(incrementButton)
    expect(counterText).toHaveTextContent(1)
    expect(decrementButton).not.toBeDisabled()
  })
```js

###### __Test #3__
We expect that when the decrement button is pressed, the counter value should decrease by 1. When the counter reaches zero, the decrement button should become disabled.

```js
// Within the describe block from test #1

  test('Decrement decreases value by 1 and disables decrement button at 0', () => {
    render(<App />)
    const incrementButton = screen.getByText(/Increment/i)
    const decrementButton = screen.getByText(/Decrement/i)
    const counterText = screen.getByTestId("counter-value")

    expect(counterText).toHaveTextContent(0)
    userEvent.click(incrementButton)
    expect(counterText).toHaveTextContent(1)
    expect(decrementButton).not.toBeDisabled()
    userEvent.click(decrementButton)
    expect(counterText).toHaveTextContent(0)
    expect(decrementButton).toBeDisabled()
  })
```

#### Form Tests

The second feature of our mini-app, to explore how we can test for user interaction with a form, involves a form that creates list items when submitted.

###### __Test #4__
First, we can create the basic test to ensure that the expected elements are rendered to the page, similar to what was done earlier.

```js
describe('App Item List', () => {
  test('List Form Components render', () => {
    render(<App />)
    const listItemInput = screen.getByLabelText(/Create List Item/i)
    const addItemButton = screen.getByTestId("add-item")

    expect(listItemInput).toBeInTheDocument()
    expect(addItemButton).toBeInTheDocument()
  })
```
###### __Test #6__
Now that we have confirmed that the elements exist, we need to ensure that they function as expected: 
 - Initially, we would expect the input field to be empty, and that the user should able to type into the field and change the value of the field.
 - With text in the field, we expect that the user should be able to click on the submit button to create a new list item on the page with that text, and it would reset the input field.

```js
  test('User can add item to page', () => {
    render(<App />)
    const listItemInput = screen.getByLabelText(/Create List Item/i)
    const addItemButton = screen.getByTestId("add-item")

    expect(listItemInput).toHaveValue("")
    userEvent.type(listItemInput, "hello")
    expect(listItemInput).toHaveValue("hello")

    userEvent.click(addItemButton)
    expect(screen.getByText("hello")).toBeInTheDocument()
    expect(listItemInput).toHaveValue("")
  })
```
###### __Test #7__
After a list item has been created, the user should be able to click the remove button next to it, to remove it from the page.

```js
  test('User can remove item from page', () => {
    render(<App />)
    const listItemInput = screen.getByLabelText(/Create List Item/i)
    const addItemButton = screen.getByTestId("add-item")

    userEvent.type(listItemInput, "hello")
    userEvent.click(addItemButton)
    const newItem = screen.getByText("hello")
    expect(newItem).toBeInTheDocument()
    
    const removeButton = screen.getByTestId('remove-item0')
    userEvent.click(removeButton)
    expect(newItem).not.toBeInTheDocument()
  })
```

## Implementing the Component

With the tests in place, we should now build our component, and it should meet the expectations set in our tests. Writing the code for the component is no different than it would be without the tests in place. The only additional thing we must do, is include the `data-testid` on the elements for which our tests were querying the elements by using `getByTestId()` such as the list items and buttons. The full code implemented to create the component can be found below the demo.

__End Result__:
![Example App Demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ghxinrwnsdrkmayc574w.gif)

We can now run the tests using `npm test` as see the results!

![Final Test Results](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pyodezccpxlfh6ifdson.png)

Below is the code used to create the component demonstrated above, using hooks:

```js
import { useState } from 'react'
import './App.css';

function App() {
  const [counter, setCounter] = useState(0)
  const [listItems, setListItems] = useState([])
  const [newItemText, setNewItemText] = useState("")

  const handleCounterClick = value => {
    setCounter( counter => counter + value )
  }

  const handleNewItemChange = e => {
    setNewItemText(e.target.value)
  }

  const handleAddItem = e => {
    e.preventDefault()
    setListItems([...listItems, {
      text: newItemText,id: listItems.length
      }
    ])
    setNewItemText('')
  }

  const handleRemoveItem = id => {
    const newListItems = listItems.filter( item => item.id !== id)
    setListItems(newListItems)
  }

  const listItemComponents = listItems.map( item => {
    return (
      <li
        data-testid={`item${item.id}`}
        key={item.id}
      >
        {item.text}
        <button
          data-testid={`remove-item${item.id}`}
          onClick={() => handleRemoveItem(item.id)}
        >
          Remove
        </button>
      </li>
    )
  })
  return (
    <div className="App">
      <header className="App-header">
        <p>
          Counter:
          <span data-testid="counter-value">
            {counter}
          </span>
        </p>
        <div>
          <button 
            onClick={() => handleCounterClick(1)}
          >
            Increment
          </button>
          <button 
            onClick={() => handleCounterClick(-1)}
            disabled={counter <= 0}
          >
            Decrement
          </button>
        </div>
        <form onSubmit={handleAddItem}>
          <label
            htmlFor="newItem"
          >
            Create List Item
            <input 
              id="newItem"
              value={newItemText}
              onChange={handleNewItemChange}
            />
          </label>
          <input
            data-testid="add-item"
            type="submit"
            value="Add Item"
          />
        </form>
        <ul>
          {listItemComponents}
        </ul>


      </header>
    </div>
  );
}

export default App;


```

## Conclusion:
While this only scratches the surface of testing React components, I hope this serves as a primer for getting started with developing your own tests for your components. 

## Resources:
* [A Beginner's Guide to Unit-testing with Jest](https://dev.to/dsasse07/a-beginner-s-guide-to-unit-testing-with-jest-45cc)
* [Testing-Library/Jest-DOM Documentation](https://www.npmjs.com/package/@testing-library/jest-dom)
* [Testing-Library/React Documentation](https://testing-library.com/docs/)
* [Blog Repo](https://github.com/dsasse07/jest-react-example)





In my last post, A Beginner's Guide to Unit-testing with Jest, I walked through getting started with...

Beginner's Guide to Jest Testing in React

Unit testing is an integral part of Test-Driven Development (TDD) which is the process of defining the desired actions of a function and what we expect it to do (or not do) before we begin work on the actual function. Approaching software development in this fashion serves a number of purposes:

* this process can help define a path to success by outlining the tasks that must be done over the course of the function. 
* this process can help identify edge-case scenarios and ensure that your code continues to function as expected in these situations. 
* As the codebase continues to grow and be modified, this process also ensures that changes to other parts of the codebase do not negatively effect the performance of the tested function.

Programming languages have their own frameworks for developing unit tests. For Javascript, Jest is one of the most widely used testing frameworks, and I hope this blog serves as a beginner's guide for those looking to get started in writing their own Jest tests.

We will walk through the process of setting up basic Jest tests and the files, but you can view [the repo containing all of the code here](https://github.com/dsasse07/jest-example)


## Contents
* [Setting Up Jest](#setting-up-jest)
* [Identifying Desired Actions](#identify-desired-actions)
* [Initializing the Test File](#initializing-the-test-file)
* [Writing Tests](#writing-tests)
* [Running the Tests](#running-the-tests)
* [Writing the Functions](#writing-the-functions)
* [Conclusion](#conclusion)
* [Resources](#resources)


## Setting Up Jest 

__Steps:__
* Create a new directory, and `cd` into that directory.
* Set up the NPM environment 
```sh
mkdir jest-example && cd jest-example 
npm init -y
```
* Install Jest
```sh
npm i jest --save-dev
```
* Configure the NPM environment to use Jest by modifying the `package.json` file created earlier. This edit will cause the command `npm test` to run the tests we will be building.
```js
// In package.json
"scripts": {
  "test": "jest"
}
```

## Identify Desired Actions

To begin writing the tests, we must define what the function we will be building _should_ do, and what the _expected_ outcome should be when the function is invoked.

For our example, let's consider an object containing information about a user's blog posts:
```js
const user = {
    username: "user1",
    blogs: [
      {
        title: "Entry 1"
        likes: 130,
        content: "Blog 1 Content..."
      },
      {
        title: "Entry 2"
        likes: 100,
        content: "Blog 2 Content..."
      }
    ]
  }
```

We will be writing two functions, 
* `getTotalLikes` to get the total number of likes of the given user's posts,
* `getMostPopularBlog` to return the blog object of a specified user with the most likes.

Following the TDD process, we will develop tests for these functions prior to working out the logic for the functions themselves.

## Initializing the Test File

Typically, tests are written in a `tests` or `__tests__` subdirectory of the app, and we will follow this same convention. From the root of our example project, let's create a `tests` directory and the file which will contain our tests.
```sh
mkdir tests && cd tests && touch exampleFunctions.test.js
```
The first thing we must do in this new file is to import the functions that we will be testing (it's ok that they have not yet been written.) For the sake of this blog, we will be writing both of the sample functions into the same `.js` file, and we will use destructuring in the import to get access to both of those functions.
```js
// jest-example/tests/exampleFunctions.test.js
const { getTotalLikes, getMostPopularBlog } = require('../exampleFunctions')
```
Both of the example functions discussed above will be tested using the same sample `user` object mentioned previously, so we can define this globally for our tests file as well.
```js
// jest-example/tests/exampleFunctions.test.js
const { getTotalLikes, getMostPopularBlog } = require('../exampleFunctions')
const user = {
    username: "user1",
    blogs: [
      {
        title: "Entry 1"
        likes: 130,
        content: "Blog 1 Content..."
      },
      {
        title: "Entry 2"
        likes: 100,
        content: "Blog 2 Content..."
      }
    ]
  }
```
## Writing tests
Tests typically contain these general components: 
* a `describe` function is invoked which accepts two arguments: 
  * a string (a description that will appear in the terminal when tests are run, which "describes" the test block)
  * a callback function which will contain the individual tests..
* One (or more) `test` function which accepts two arguments: 
  * a string describing the action of the specific test, 
  * a callback function containing an `expect` function and a `matcher` function.
    * The `expect` function accepts the function invocation being tested, and is chained to the `matcher` which describes the expected results.

In the `getTotalLikes` function, we __expect__ that when the function is passed a user object, the return value __will be__ an integer that is the sum of the `likes` on all of the blogs of that user. Including this into our test file would look like this:
```js
  // jest-example/tests/exampleFunctions.test.js
const { getTotalLikes, getMostPopularBlog } = require('../exampleFunctions')
const user = {
    username: "user1",
    blogs: [
      {
        title: "Entry 1",
        likes: 130,
        content: "Blog 1 Content..."
      },
      {
        title: "Entry 2",
        likes: 100,
        content: "Blog 2 Content..."
      }
    ]
  }

describe('getTotalLikes', () => {
  test('should return the total likes of a user', () => {
    expect( getTotalLikes(user) ).toBe(230)
  })
})
```

Here, the `.toBe` matcher is used to define the expected output of the function invocation written in the preceeding `expect` statement. The `.toBe` matcher returns truthy if the output of the function is equal to the value passed into the matcher. The Jest framework has a number of defined matchers, such as:
* `toBeNull` matches only null
* `toBeUndefined` matches only undefined
* `toBeDefined` is the opposite of toBeUndefined
* `toBeTruthy` matches anything that an if statement treats as true
* `toBeFalsy` matches anything that an if statement treats as false
* `toBeGreaterThan` or `toBeLessThan` for number value comparisons
* `toMatch` accepts a Regex pattern to match a string output
* `toContain` can be used to see if a value is contained in an Array

More common Jest Matchers can be found in the [official introduction here](https://jestjs.io/docs/using-matchers) or a complete list can be found [in the official docs here](https://jestjs.io/docs/expect)

For our second function, we can define the expected output object within the `describe` block's scope and pass this object into our matcher. Doing this, we will again be checking for equality; however when dealing with objects, we must use `.toEqual` instead, which iterates through all of the values of the objects to check for equality.

With this in mind, we must add this final `describe` block to our test file:

```js
describe('getMostPopularBlog', () => {
  test('should return the most popular blog of a user', () => {
    const output = {
        title: "Entry 1",
        likes: 130,
        content: "Blog 1 Content..."
    }
    expect( getMostPopularBlog(user) ).toEqual(output)
  })
})
```
## Running the Tests
The tests we have written should clearly fail because we have not yet written the functions; however, we can run the test to ensure that they are properly set up.

To run the tests, run `npm test` (which matches the command we defined in the `package.json`). We are wonderfully greeted with the expected failures that our functions are not defined, and it indicates that our test file is prepared.

```js
 FAIL  tests/exampleFunctions.test.js
  getTotalLikes
    ✕ should return the total likes of a user (1 ms)
  getMostPopularBlog
    ✕ should return the most popular blog of a user

  ● getTotalLikes › should return the total likes of a user

    TypeError: getTotalLikes is not a function
```

## Writing the functions
Create a new file in `/jest-example` which will contain our functions. The name of the file should match the filename of the test file, minus the `.test` extension.

In `/jest-example`
```sh
touch exampleFunctions.js
```

In this file we need to define out two functions, and ensure that we export those functions so that our test file can access them.
```js
function getTotalLikes(user){

}
function getMostPopularBlog( user){

}
module.exports = { getTotalLikes, getMostPopularBlog }
```
If we save and run our tests again, we will see that all four tests still fail (which is expected), but Jest provides a ne message to us indicating what happened.

```js
  getTotalLikes
    ✕ should return the total likes of a user (3 ms)
  getMostPopularBlog
    ✕ should return the most popular blog of a user (1 ms)

  ● getTotalLikes › should return the total likes of a user

    expect(received).toBe(expected) // Object.is equality

    Expected: 230
    Received: undefined
```
This message indicates that our test is able to find the matching function, unlike before, but now instead of getting the expected value that was passed to the `matcher`, no value is being returned from our function. Let's implement the logic for our two functions as shown below:

```js

function getTotalLikes( user ){
  // iterate through the blog entries and sum the like values
  const totalLikes = user.blogs.reduce( (total, blog) => {
    return total += blog.likes
  }, 0)

  return totalLikes
}

function getMostPopularBlog( user ){
  // Iterate through users blogs, and update the tracking object to
  // continually have the index of the blog with most likes, and the 
  // number of likes for comparison
  const maxLikes = user.blogs.reduce( (max, blog, index) => {
      if (blog.likes > max.likes) {
        return {
          index: index, 
          likes: blog.likes
        }
      } else {
        return max
      }
  }, {index: undefined, likes: 0} )

  //Select get the blog object by looking up the index stored in the tracker
  const topBlog = user.blogs[ maxLikes.index ]
  return topBlog
}

module.exports = { getTotalLikes, getMostPopularBlog }
```

Now, if we run the tests one final time, we are greeted with pass indicators:
```js

 PASS  tests/exampleFunctions.test.js
  getTotalLikes
    ✓ should return the total likes of a user (1 ms)
  getMostPopularBlog
    ✓ should return the most popular blog of a user (1 ms)

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        0.713 s, estimated 1 s
```

## Conclusion

Testing is powerful. Even with these limited tests, we would would be able to see if changes further along in the development process negatively impact the work we have already done. For example, if the structure of the API response that we used to build the `user` object changed, running the test file would indicate an issue prior to that change going into effect. This is especially important in development teams, where multiple developers are working on the same codebase. The tests help ensure that new code remains compatible and functional with the codebase and with that of other developers.

However, the reliability and power of testing is limited by the comprehensiveness of the test scenarios. As you are building tests, remember to consider the edge case scenarios that could break the function of your application, and write tests to simulate those. For example:
* What would we expect to happen if the user was not found?
* What is the expected behavior if two posts have the same number of likes?
* What is the expected behavior if a user has no blogs?

The topic of testing goes very deep, but hopefully this helps you get started with understanding the testing process and developing your own tests.

### Resources:
* [Getting Started in Jest](https://jestjs.io/docs/getting-started)
* [Common Jest Matchers](https://jestjs.io/docs/using-matchers)
* [Jest Docs](https://jestjs.io/docs/expect)
* [Jest Tutorial](https://www.valentinog.com/blog/jest/)
* [Blog Repo](https://github.com/dsasse07/jest-example)





Unit testing is an integral part of Test-Driven Development (TDD) which is the process of defining th...

A Beginner's Guide to Unit-testing with Jest

# Reminiscing of Ruby's .send

Since I have begun exploring the world of Javascript and React in recent weeks, one of the things I have missed from the world of Ruby has been the `.send` method. Being able to call a method by way of a string or symbol argument (that could be stored in a variable) opens many doors for abstraction.

For those who are unfamiliar with Ruby's `send` method, I discuss it more in [this blog post](https://dev.to/dsasse07/til-abstraction-refactoring-with-send-in-ruby-1phe), but the _gist_ of it can be seen below...(get it?)

{% gist
https://gist.github.com/dsasse07/8e97881d335c3058ae608f17c1f26543 %}

While the amazingness of this may not be immediately apparent, I'll quickly reuse one of the example from the blog linked above. Here we are taking an array of instances, and are looking to create a new hash where the keys are specific property values of the instances, and the value for each key is the number of instances that have that property. There are a variety of ways to do this, but without `send` you would need two separate methods to perform this action for two different properties, however with `send` and the ability to pass in a string value that matches a property, we are able to use the same method for two different properties.

{% gist https://gist.github.com/dsasse07/e9d69f69e2c9f63ccc27b8fd3205692e %}

---
# Enter the world of Javascript

As I dive in to Javascript, I love how it allows you to store functions as variables and pass functions as arguments, however for a while it still felt like something was missing, since I was struggling to find a way to conditionally invoke functions without the unnecessary complications of `if...` or `switch` statements. 

Recently I came up with a solution, capitalizing on Javascript's ability to store functions as values in an Object while working on the problem below:

In a project, I was provided access to a `Log` class that took in a `string` and output the string as a log message object that contained the message type (`error`, `warn`,`notify`), the timestamp, and the message text:

{% gist 
https://gist.github.com/dsasse07/14cbba001863c8685f8d81a1a6703975
%}

Immediately I felt the single silent tear and pang of nostalgia for Ruby's `send` once again. How nice would it be to be able to invoke the correct function by just including the message type as a string along with the message test!

```ruby
Log.send("warn")(message_text)
```

## The Solution

While typing the same statement into my text editor wishfully pretending JS has learned to be as fluffy as Ruby in the last few days, I realized "warn" in this case could also essentially be thought of as a key in an object, and JS __DOES__ have the ability to process variables to use their values in selecting a key:

{% gist 
https://gist.github.com/dsasse07/aff89b1fe5aa6aaa62a5d949af44890f
%}

Since JS __ALSO__ has the ability to store functions as keys in an object, this means that the three `Log` class methods that were defined earlier can each individually be stored into a `logGenerator` object under different keys. Any variable containing a string can then be passed to the object to load the desired function, and then invoke it with the desired arguments without the need for messy conditionals. See the comparison below:

{% gist
https://gist.github.com/dsasse07/e750908eb15c9d57382aa61b76ca20c4
%}

As the conditional logic becomes for complex, or the number of possible values for the variable increase, the need for such a simple way to access a multitude of different functions becomes even clearer. Store the functions in an object, and use a variable to target the key of the function you wish to invoke.


Reminiscing of Ruby's .send   Since I have begun exploring the world of Javascript and React...

Conditional Function Invocation without Conditional Statements in JS

## Update:
Thank you to [edh_developer](https://dev.to/edh_developer) for helping me to identify an issue with multiple possible boards being generated. The gist code has been updated.

## Sudoku

Puzzle games like Sudoku have always fascinated me, and Sudoku in particular has helped me get through many long waits. It is a quite popular game, but for those unfamiliar with the rules here is a quick synopsis, or you can see the Wikipedia entry here.

![Sudoku Starting Board](https://miro.medium.com/max/700/0*v2wuAQfdx3mMrDK6 "Example Sudoku Board")

--- 

A Sudoku game begins with a 9x9 grid partially filled with values from 1 to 9. The goal for the player, is to fill all of the remaining boxes with values from 1–9. However, each number that a player inserts must pass three strict rules:

1. Each value 1–9 can only be present once in a row. So in the example board above, 5, 3, and 7 cannot be written into any of the empty cells in the first row.

2. Each value 1–9 can only be present once in a column. So in the example board above, 5, 6, 8, 4, and 7 cannot be written into any of the empty cells in the first column.

3. Each value 1–9 can only be present once within a grid region. A grid region is a smaller 3x3 grid within the larger Sudoku board. These regions can be seen in the board above by their bolded borders. For example, the top-left region contains the values 5,3,6,8, and 9, and so these values cannot be placed again into any of the empty cells remaining in this region.

Solving these puzzles by hand involves meticulously comparing values against these rules and inserting them if they pass. Using similar logic in a [backtracking algorithm](https://en.wikipedia.org/wiki/Backtracking), we can write a small script that can both generate and solve these boards as well. Let’s break it down here, or [skip to the bottom for the full code](#full-code).

---

## Backtracking

![Sudoku Starting Board](https://miro.medium.com/max/960/1*s1q6pAvl6JQUvoivkNYTyw.gif "Let's go back a few steps")

Backtracking is an algorithmic approach to solving problems under specific constraints (sounds like Sudoku to me!) in which a value is entered if it meets the conditions and then the algorithm proceeds to the next value. However, if the algorithm is unable to place these subsequent values, it will backtrack to the last successfully placed value and change it to the next possible successful value and continue again.

---

## Implementation

I implemented the backtracking solution in both Javascript and Ruby. I have outlined the process and components in Javascript below, but the full code for both Ruby and Javascript can be found at the bottom of this article.

### Placement Criteria

To begin implementing this algorithm, we must first define what our successful criteria are: `rowSafe` checks the uniqueness of the values in the row, `colSafe` checks it in the column and `boxSafe` in the 3x3 grid. Then, we need to evaluate whether the coordinates of the `emptyCell` (which is a JS object or Ruby hash containing both coordinates)

- To check the row, we can pick the row of `puzzleArray` that is specified in the `emptyCell` coordinates and see if it contains the `num` value we are trying to insert by looking for the index of that value.

{% gist https://gist.github.com/dsasse07/10869560d2e4c0538134733e7b24546f %}

- To check the column, we can examine the column index of `emptyCell` for each row and see if any of them contain that value. In Javascript `.some()` will return `true` if at least one of the values of array meet the condition.

{% gist https://gist.github.com/dsasse07/3df50bdb9810e2cfc9f51bd812433491 %}

- The region condition is trickier, because we must first determine which region the cell belongs to. Each region begins on rows 0, 3, and 6 and columns 0, 3, and 6. Using a combination of subtraction and modulus with the coordinates of the empty cell, we can determine the top-left most cell of the region which the cell belongs to. Then, we scan through the region and look for a match

{% gist https://gist.github.com/dsasse07/3c1d459eeca0867eacfc1ef5d3fca13c %}

- Since all three criteria must be met to pass, we can check that all conditions are met with a helper function.

{% gist https://gist.github.com/dsasse07/1fb468d96fd0bb78e7bd74932d184e54 %}

### Generating a Game Board

To generate a game board, we first start by making a completely filled, and correctly solved board out of a completely blank board. The range of values 1 to 9 is shuffled at the start of each iteration, ensuring the that probability of each new game being similar is low. Since each successful placement of a number will be followed by another attempt to place a number, this `fillPuzzle` function will [recursively call itself](https://en.wikipedia.org/wiki/Recursion). Since this can get a bit tricky, let’s outline the steps before we see the code:

- Obtain an empty 9x9 matrix filled with zeros.
- Scan the matrix for the next cell with a current value of zero.

{% gist https://gist.github.com/dsasse07/90920488e22151c4449601a6aa74acc3 %}

- Randomize the array [0,1,2,3,4,5,6,7,8,9] and attempt to place the first value of that shuffled array into the empty cell found above.

- Insert a conditional to abort the script if board fails to generate within a certain number of iterations. Most boards will generate in < 500ms, but random generation can lead to long wait times on occasion. I will discuss this more in the initialize section.

- If the value from the shuffled array passes all of the safety checks, insert it and go back to step 2.

- If the value from the shuffled array fails the safety check, return the cell to zero, and go back to the previously placed number and try to change it to the next possible value from the shuffled array and repeat.

{% gist https://gist.github.com/dsasse07/30f7489219b5af00daeefae2e1688515 %}

### Generating a Playable Board

Hooray! We have a completely filled Sudoku board that meets all of the criteria for the game! However, if you actually wanted to play the game, you need to “poke some holes” in it to make it playable. We can remove these cells at random; however, we must ensure that the removal of a value creates a board that can still be solved AND that it leads to a unique solution - as in there is only one way to place the numbers and win.

![Sudoku Backtracking Animation](https://miro.medium.com/max/258/1*TStHCO5xf_9KQNvz0o8rmA.gif "Sudoku Backtracking Animation")

If the board can no longer be solved, or a second possible solution is found, we will put the value back and pick a different random cell to remove. As a bonus to this method, we can create an ordered list of the coordinates and value of each removed item if we ever need a hint. To this function we must pass in an integer number of holes to punch into the board. The more holes there are, the more difficult the board will be.

{% gist https://gist.github.com/dsasse07/ee1ff3e1595c0d016db22c8605fcf3ee %}

### Results

All that is left is to run the script and receive the `startingBoard` , `solvedBoard` , and list of `removedVals` in an instant! Notice that in the initializing function `newStartingBoard` we will `try` to create a game. Most games will be created in <500 ms, but to prevent the occasional long wait, the iteration counter in `fillPuzzle` will throw an error and abort the script after a specified time. We will `catch` this error and use it to re-trigger the initialize function. It is faster to abandon puzzles with abnormally long generation times and start over than it is to wait them out.

{% gist https://gist.github.com/dsasse07/c80c87add2973d10f9f6f30715179181 %}

![Generated Sudoku Boards: Solved, Starting, Removed Values](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d55m9csr8m18zma249ka.png)

And now join me in forever feeling incredibly slow when trying to solve these puzzles by hand.

![Amateur Hour](https://miro.medium.com/max/320/1*OsZabFY5Zv8yfDbmxRSNzw.gif)

## Resources 

- [Use Backtracking to Solve Sudoku](https://dev.to/christinamcmahon/use-backtracking-algorithm-to-solve-sudoku-270) by: {% user christinamcmahon %}

- [Sudoku Generator Algorithm by: 101Computing](https://www.101computing.net/sudoku-generator-algorithm/)

## Full Code <a name="full-code"></a>
- [Javascript](#javascript)
- [Ruby] (#ruby)

### Javascript - Full Code <a name="javascript"></a>
- [JS Gist External Link](https://gist.github.com/dsasse07/3ff7ae0eff2a7b3efd276e3f10f59f91)

{% gist https://gist.github.com/dsasse07/3ff7ae0eff2a7b3efd276e3f10f59f91 %}

### Ruby - Full Code <a name="ruby"></a>
- [Ruby Gist External Link](https://gist.github.com/dsasse07/f95b7c3380b14660b85c6ac2780e1b9d)

{% gist https://gist.github.com/dsasse07/f95b7c3380b14660b85c6ac2780e1b9d %}


Update:   Thank you to edh_developer for helping me to identify an issue with multiple...

Generating & Solving Sudoku  in JS & Ruby with Backtracking

Refactoring App features into Modules can make debugging, managing, and extending the code base easier - if done right
---

Recently I was pair-programming on a Ruby CLI app to help manage subscription services for my [phase 1 project](https://medium.com/r/?url=https%3A%2F%2Fgithub.com%2Fsimonjacobs212%2Fsubscription-tracker) at Flatiron School. After building out the models and schema utilizing ActiveRecord my partner and I began writing out the primary app file that would run and manage the app interface. 

After getting through just the user login control, we quickly realized that this file was about to become incredibly large, and search through hundreds of lines of code to find specific methods or for debugging was going to be a pain. 

From our previous experience with incorporating modules ([described in this blog post](https://medium.com/r/?url=https%3A%2F%2Fdsasse07.medium.com%2Fabstracting-refactoring-in-ruby-with-send-97e6ef1a4661)) we thought it would be a good idea to build the major menus/features of the app into their own modules and have our primary app file inherit them. 

Using the `require_all` gem, we built out the modules and required each of them in our `environment.rb` file using `require_all 'app/tools'`. The first few modules went smoothly, but then we quickly began receiving `Load_Error` and `Uninitialized Constant` errors as more modules were constructed even though all of the files were being required.


---

## Debugging

In trying to debug the errors, we realized that some of our modules were being loaded fine, and others were not. For the ones that failed to be loaded, they tended to be named last alphabetically. We also saw that the modules that had errors were the ones that had were being included in multiple places such as `CliControls` which managed user input methods. From this, two issues needed to be resolved:

* __Issue #1:__ How to provide module to multiple others without creating cross-dependencies
* __Issue #2:__ How to ensure the module files were loaded in the appropriate order so that the `CliControls` module was loaded before the others that inherited it.



---

### Issue #1: Module Inheritance

In researching the first issue, we came across a [post from StackOverflow](https://medium.com/r/?url=https%3A%2F%2Fstackoverflow.com%2Fquestions%2F4914913%2Fhow-do-i-include-a-module-into-another-module-refactor-aasm-code-and-custom-sta) that discussed how Modules can pass along other modules that they themselves have inherited. Essentially if Module B inherits Module A and then a Class inherits Module B, it will gain access to the methods from both Modules B and A.

{% gist 
https://gist.github.com/dsasse07/c74d194d5e27487b4da1c87c8a37a694
%}


From this, we realized that if we determined a hierarchy for our modules/features, with the overall app at the top and the most widely used module on the bottom we can ensure that the main app still has access to all of the necessary methods even if it is not directly inherited. 

The app we designed is a Subscription tracking app, and we ultimately ended up with the hierarchy below. Where ASCII graphics and coloring, and sound files for our CLI app were in the lowermost `FunStuff` module, which was needed by the `CliControls`. 

![Module Heirachy Diagram](https://cdn-images-1.medium.com/max/1600/1*-BQlGXnCQIYD9AIJe1omSA.png)

Since we inherited `FunStuff` in `CliControls`, the modules that inherited `CliControls` would automatically gain access to `FunStuff` just by inheriting `CliControls`. We followed the same pattern upwards, with our primary app class `SubscriptionTracker` needing to inherit directly from just three modules `AccessSubscriptions`, `UserSettings`, `SpendingAnalyzer` to gain access to all methods.

* __Layer 1:__
 * `CliControls` directly inherits `FunStuff`
* __Layer 2:__
 * `iCalendar`, `Add_New_Sub`, `Update_Sub`, `LoginControls`, `SpendingAnalyzer` each directly inherit `CliControls`
* __Layer 3:__
 * `AccessSubscriptions` directly inherits `iCalendar`, `Add_New_Sub`, `Update_Sub`
 * UserSettings inherits LoginControls
* __Layer 4:__
 * `SubscriptionTracker` directly inherits `AccessSubscriptions`, `UserSettings`, `SpendingAnalyzer` 



---

### Issue #2: Requiring the Files

By resolving the first issue, we realized that the issue of requiring the module files in the appropriate order can now also be easily solved. Instead of using the `require_all` gem which loads all files in a folder in alphabetical order, we could load each file individually using `require_relative` starting with the module files at the bottom of the hierarchy, and working upwards.

{% gist 
https://gist.github.com/dsasse07/d3b84beba40ad2c809432a439c4532b2
%}

With the inheritance set up in the appropriate order, and files loaded in matching suit, the main app class `SubscriptionTracker` will be able to call all of the methods for the different menus and features.

Refactoring App features into Modules can make debugging, managing, and extending the code...

Refactoring App Features into Modules in Ruby


### Beginner’s guide to Setting up the Twilio API in Ruby and using ENV files to secure your credentials. Time to actually say Hello World to the world!

---

As a beginner in Ruby working primarily in a text editor, Terminal, and interacting with an app through CLI, it’s natural to itch for something “bigger” and to want to give your basic app a greater reach. It’s exciting to see “Hello World” pop up on your screen for the first time, but after the 100th (or even 3rd) time it loses a little magic. What if we could instead send that message out to the users in the world via a text message? Or, in more advanced cases, what if you wanted to incorporate Two-factor Authorization for user logins to your web app? Or, if you wanted to send push notification and event reminders? Turns out you can with not too much effort thanks to Twilio’s API.

![Image for post](https://miro.medium.com/max/1400/1*ZajKA3EXMPKhfKjdb5CcZQ.png)

## Twilio

[Twilio](https://www.twilio.com/) is a service that provides virtual phone numbers that can be used to send or receives Voice, SMS, and MMS depending on various needs and integrations. It is free to sign up, and a free trial comes with a $15 credit that can be used to rent a virtual phone number and pay for calls/texts sent or received. For beginners looking to try out Twilio and what it can do for your app, please know than this complimentary $15 is way more than enough to get going, but more on that later. In order to send messages from your Ruby app, you need to connect to Twilio’s API.

## Twilio API

---

[APIs (Application Programming Interfaces)](https://www.howtogeek.com/343877/what-is-an-api/) can be complex, but essentially they are a set of commands/protocols presented to the public by a service. These commands allow outside programs, websites, or applications to interact with the service in some way such as receiving data from or submitting data to the service. In this case, the Twilio API allows apps to connect and utilize the virtual phone numbers that Twilio hosts. It is by connecting to this API and utilizing the commands it provides that we can send SMS from an APP.

---

## Getting Connected
### Step 1: Make a Twilio Account & Rent a Phone Number

Go to the Twilio website and make a free trial account. After confirming your contact information and answering some questions about your app such as programming language and desired functions, you will be taken to the main console where you will be able to rent your a trial phone number.
A phone numbers can be rented for $1.00 per month, so as long as you “release” the number when you are done with your app, the free trial credit will last you for many projects.

### Step 2: Install the Twilio gem into your app

Add gem 'twilio-ruby' to your Gemfile and run bundle install from your terminal. This will install the helper library needed to integrate your app with Twilio.

### Step 3: Copy the code snippet from the Twilio CodeExchange 

On the code exchange there are snippets for different functionalities that you can incorporate. Copy the snippets that pertain to your app. The snippet for sending an SMS that we will be using is shown below.

{% gist
https://gist.github.com/dsasse07/6933ab99a4b7eee4244daba37dc92f5d %}

Copy the snippet into a new file, in my case I made a file called `twilio.rb`. Let’s break down the code above:

`require 'twilio-ruby'`

- This provides access to the needed Twilio methods from the `'twilio-ruby'` gem.

`account_sid = 'ACcd207c4be71151a3f50ef05c79e865d5'`
`auth_token = 'yyyyyyyyyyyyyyyyyyyyyyyyy'`

These two lines will connect your app to your Twilio account. They can be thought of as your username and password. The strings following the variable names will eventually be replaced with your own credentials but you do not want to type them directly into this string since it will allow anyone who can see the code to gain access your Twilio account and you can end up financially responsible for their actions. We will go over how to secure these credentials later.

```ruby 
from '+15551234567' # Your Twilio number
to = '+15555555555' # Your mobile phone number
```

These two lines define the phone numbers to be used in the text message: from should be replaced here with the Twilio phone number that you rented, and can be found on your Twilio console. The to phone number will be the phone number that the SMS is sent two, and will likely be defined in your app by a user and then passed into the send_sms message.

```ruby
client.messages.create(
from: from,
to: to,
body: "Hey friend!"
) 
```

This is the method from the Twilio gem that ultimately creates the text message by sending phone numbers and message body to Twilio via its API. In order to pass in different phone numbers and message content to this method, we will want to put this into a method of our own.

### Step 4: Incorporating the snippet into your app

Depending on your needs, the code snippet can be incorporated directly into a method with the desired class, but if this functionality will be needed in other places, you will likely want to build this into a `Module` to be included in other classes. More information on abstraction using modules can be found in my previous post [here](https://dsasse07.medium.com/abstracting-refactoring-in-ruby-with-send-97e6ef1a4661).

{% gist 
https://gist.github.com/dsasse07/84e165ccc8400e2ad69ccb23de8c223a
%}

Here, I made a `send_sms` method that accepts a phone number and a message string as an argument that can then be passed to the Twilio method for sending the text message. Since this method is in my `TwilioControls` module, it can be called from any class as long as the class inherits the module. The other new change that can be seen above, is the addition of `require 'dotenv/load'` and the replacement of the `@@account_sid` and `@@auth_token` strings with a call to the `ENV` variable which will store the authentication information without making it publicly available.

### Step 5: Securing your credentials with dotenv

`dotenv` is another ruby gem that can be used to add information to the environment variable ENV such as API keys and credentials from a separate file. Since this information will be stored in a separate `.env` file, it can be included in your `.gitignore` file so that it is not uploaded to GitHub with the rest of your code. Documentation for `dotenv` can be found in its [Readme](https://github.com/bkeepers/dotenv).

- Add `gem 'dotenv'` to your Gemfile and run bundle install.
- Create a new file in your app directory called `.env` if you do not already have one.
- Into this `.env` add your Twilio API credentials

{% gist https://gist.github.com/dsasse07/50a621c12faf8b8307ce66dc65b6d7ed %}

- With this file in place, when a file has `require 'dotenv/load'` it will load the data from the `.env` file into the ENV hash variable. This data can then be accessed using the hash’s key as shown below

{% gist
https://gist.github.com/dsasse07/84e165ccc8400e2ad69ccb23de8c223a %}

- __Prevent your keys from being uploaded to GitHub.__ This is done by creating a `.gitignore` file and typing `.env` into it. Files listed in `.gitignore` will not be tracked or added to GitHub when you commit and push your code.

### Step 6: Send your Message!

With everything set up, call the send_sms message from your app after providing a receiving phone number and a message string. With a trial account, you will only be able to send your message to phone numbers verified on your Twilio account. This means the only recipients can be you or your teammates until you upgrade your account, but it will not prevent you from testing your functionality. (Note: sending and receiving SMS messages each cost $ 0.0075 per message and will be charged against your complimentary account balance.)

In the app I developed, I wanted to be able to send a text message with a reminder of a password to a user, so I implemented the send_sms method from the `TwilioControls` module like this:

{% gist https://gist.github.com/dsasse07/83181fedb2d21ba5a2d17acd085d4403 %}

![Text Message Received](https://miro.medium.com/max/1400/1*qbfiMyl28JvQkK3Q7RGZ0g.jpeg)

Beginner’s guide to Setting up the Twilio API in Ruby and using ENV files to secure your...

Sending SMS Text from a Ruby App

A beginner’s journey to writing DRY, modular, and extensible code in Ruby with ActiveRecord

Imagine we are building an app that represents an old-school VHS store. This was a task I paired on recently and we challenged ourselves to keep our code DRY.

![photo-1471188520444-a325e413e595](https://dev-to-uploads.s3.amazonaws.com/i/qivwwj6vmgtj4m0r26sh.jpeg) 

## About DRY code:
One of the issues that new programmers struggle with is the DRY (Don’t Repeat Yourself) principle, which requires us to write maintainable and well-designed code.

Keeping code DRY allows us to:
* Save time, by not re-writing similar logic again and again.
Reduce the likelihood of typos leading to hours of painful debugging by reducing the number of times the same code is typed out.
* Make changes to code due to the implementation only occurring in one location.
* Rename or update variables or methods, without running the risk of forgetting to change the values in another place they were used and spend valuable time debugging a mysterious error.

One of the ways we learned to DRY our code was to abstract it and make the functionality less literal. As such this allow for the:
* Same method/function to be used in multiple places within the existing code.
* Extension of our design and allowing new features to be built off of the existing work

## The Setup

![erd](https://dev-to-uploads.s3.amazonaws.com/i/zmdbcfpblf5dp20h4t98.png)

Since I will be referring to the models of the domain, the ERD for our VHS Store app can be seen above. The domain consists of six models (Genre, MovieGenre, Movie, Vhs, Rental, and Client) associated as follows:
* Genre has many movie_genres and movies through movie_genres,
* MovieGenre belongs to a movie and a genre,
* Movie has many movie_genres and genres through movie_genres,
* Movie has many vhs and rentals through vhs,
* Vhs belongs to a movie,
* Vhs has many rentals and clients through rentals,
* Rental belongs to a client and vhs,
* Client has many rentals and vhs through rentals.

The app utilized ActiveRecord for database management and associations, along with numerous CRUD (Create, Read, Update, Delete) methods that would allow the app users to manage the data and gather insights.

## The Challenge
One of the functionalities to be added was finding the number of movies in each genre, the number of times each client rented a movie, or the number of VHS tapes owned for each movie title. This is the method we initially came up with:

{% gist https://gist.github.com/dsasse07/aad778b80069ba1d2e62e37f5ac14d32 %}

The problem with this solution, is that after doing this similar implementation for just two (of the many) it was clear that we should DRY the code. But how do you abstract a code that requires different methods to be called depending on the attributes needed? Enter the Ruby `.send` method. Akpojotor Shemi discusses the basics of `.send` in their blog post [Send Me a River (Ruby Send Method)](https://medium.com/@pojotorshemi/send-me-a-river-ruby-send-method-3b295173e5c8).

## Implementing `.send` to call methods
The Ruby `.send` method takes an argument (which can be a string or a symbol), and essentially calls the content of the argument as a method on the same instance that `.send` was called upon. 

{% gist https://gist.github.com/dsasse07/8e97881d335c3058ae608f17c1f26543.js %}

## Abstracting & Refactoring the Aggregate Methods
This opens up a high degree of freedom and abstraction since method names can be passed as arguments to other methods as strings and utilized freely, whereas otherwise conditional statements or custom methods would need to be written each time. Using `.send`, we could refactor our rental aggregation method as shown below. With the code being written in this format, we can now use one method to perform the work of both of the original methods by passing the the desired attribute as a string.

{% gist https://gist.github.com/dsasse07/e9d69f69e2c9f63ccc27b8fd3205692e.js %}

## Abstracting further — use by multiple classes
Now, what happens when we need to use this same logic in a different class? It wouldn’t make sense to rewrite the method yet again, instead, we should just abstract our method, one level further, to allow us to write the method into a Module and be included into the various classes so that we can use the same method between different classes. Second, if we look at the core of the original method (below), we are iterating through an array, counting the instances of each array item, and returning it as a hash.

{% gist  https://gist.github.com/dsasse07/e9d69f69e2c9f63ccc27b8fd3205692e.js %}

Instead of hard-coding the array, we can just pass that in as a new argument. Note also that this refactored method is in the new module as well.

{% gist https://gist.github.com/dsasse07/4680d84d5b95efda2297a485d8fa4767.js %}

## Accessing the Module from the Class
In our original VHS class, we need to remember to include/extend our class so that the shared methods can be called [(See Mehdi Farsi’s blog post Modules in Ruby: Part I)](https://medium.com/rubycademy/modules-in-ruby-part-i-a2cdfaccdb6e).
* The `include` keyword permits the class to use the methods from the specified module as instance methods in the class.
* The `extend` keyword permits the class to use the methods from the specified module as Class methods for the class

Both of the keywords are used in this refactored example so that the helper method can be used in any scenario. With access to the module set up, we then just need to pass the array that we need to iterate through to the abstracted method.

{% gist https://gist.github.com/dsasse07/4778cfb000b0dd4cd4ad98b6bdab7b88.js %}

Since the method is abstracted to be used with different arrays and different classes, we can use it with the same functionality in a new class, such as if we wanted to get a breakdown of the age demographic of our client base.

{% gist 
https://gist.github.com/dsasse07/01ef544722f8d5dc17cb518926aabfd6
%}

## Conclusion … More lessons learned
By abstracting our code using the `.send` method, my partner and I made our code shorter, flexible, open for extension, more easily debugged, and more easily maintained across our Ruby app and allows for the creation of generic aggregate methods that may not be already built into Ruby.

As a note to my future self, remember to search the documentation for all of the tools at your disposal. While the abstraction implemented for this practice worked wonderfully and provided valuable lessons in refactoring, we afterwards discovered that ActiveRecord is even more magical than Ruby. ActiveRecord’s own set of methods easily accomplish our manually refactored method with its own innate set of tools…

{% gist https://gist.github.com/dsasse07/84e2d1a813e73e29e34c4b486c766b70.js %}

Lesson learned.

[Read the blog on Medium](https://dsasse07.medium.com/abstracting-refactoring-in-ruby-with-send-97e6ef1a4661)

A beginner’s journey to writing DRY, modular, and extensible code in Ruby with ActiveRecord  Imagine...