DEV Community: Daniel Sasse

Implementing a Scroll To Top feature in React

Daniel Sasse — Thu, 01 Jul 2021 19:52:27 +0000

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.

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 hook to register the element.

First create the marker:



  const topRef = useRef(null);

Second, attach it to the desired element using its ref attribute:



<span class="o">&lt;</span><span class="nx">div</span> <span class="nx">className</span><span class="o">=</span><span class="dl">"</span><span class="s2">App</span><span class="dl">"</span><span class="o">&gt;</span>
  <span class="o">&lt;</span><span class="nx">h1</span> <span class="nx">ref</span><span class="o">=</span><span class="p">{</span><span class="nx">topRef</span><span class="p">}</span><span class="o">&gt;</span><span class="nx">Scroll</span> <span class="nx">To</span> <span class="nx">Top</span> <span class="nx">Example</span><span class="o">&lt;</span><span class="sr">/h1</span><span class="err">&gt;



    </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:



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.



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

Resources:

Algorithm Tutorial: Intro to Heaps - Heapify & Heap Sort

Daniel Sasse — Tue, 22 Jun 2021 20:10:43 +0000

Last week in Algorithm Tutorials, 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

Heapify
- Three Approaches
- Measuring Efficiency
- Heapify Implementation
Heap Sort
Resources
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. 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.

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. 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 for the trickleDown implementation and the rest of the MaxHeap class implementation.



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:

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



  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!

MaxHeap Class Gist

Algorithm Tutorial: Intro to Heaps and Priority Queue Implementation

Daniel Sasse — Thu, 17 Jun 2021 00:37:07 +0000

In this edition of the Algorithm Tutorial series, we're going to break down the Heap data structure and and its utilization to implement a priority queue.

Background
Heap Structure
Implementation
- Initialization
- Inserting Values
- Extracting Values
- As a Priority Queue
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.

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 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.

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.

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 2s 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:

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:

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).

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:

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.

Algorithm Tutorial: Max Area of an Island (DFS)

Daniel Sasse — Wed, 09 Jun 2021 19:15:18 +0000

For this entry in my algorithm walkthrough series, we will be looking at a 2D matrix search using a 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) to better understand the search process.

Problem Description
Problem Explanation
Solution
- Modeling the Solution

Problem Description

The specific problem we will be walking through, is problem Leetcode #695: 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:

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:

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:

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.

Solution

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

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 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:

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 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:

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

Daniel Sasse — Thu, 03 Jun 2021 21:43:05 +0000

In my last blog entry, 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 allows us to wait a specified amount of time before invoking a new callback function with setInterval 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 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:



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:



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.

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":

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!

Algorithm Tutorial: Champagne Tower Explanation

Daniel Sasse — Wed, 26 May 2021 18:27:25 +0000

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)

Problem Description
Problem Explanation
- Modeling the Tower
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.

Essentially, this problem is modeling a waterfall cascade and is a variant of Pascal's 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.

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.

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 for this model to help with understanding how the glasses/rows relate



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)
}

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 by clicking on any of the glasses.



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:



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])
}

Implementing a Social Share Feature

Daniel Sasse — Thu, 20 May 2021 15:40:28 +0000

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.

Creating Share Links for Social Media
Creating Share links for SMS and Email
- Email
- SMS
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.



<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!

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=.



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 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.



<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:



<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.

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:



<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 or below the demo gif.



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`)};
`;

Beginner's Guide to Jest Testing in React

Daniel Sasse — Thu, 13 May 2021 17:23:25 +0000

In my last post, A Beginner's Guide to Unit-testing with Jest, 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.

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.

Setting Up The App
Anatomy of the Default React Test
Planning the Tests
Describe the Tests
- Counter Tests
- Form Tests
Implementing the Component
Conclusion
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.

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:

// 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();
});

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.
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
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
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.

// 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.

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

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.

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.

// 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()
  })

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.

// 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.

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.

  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.

  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:

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

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

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

Daniel Sasse — Mon, 12 Apr 2021 19:12:23 +0000

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

Setting Up Jest
Identifying Desired Actions
Initializing the Test File
Writing Tests
Running the Tests
Writing the Functions
Conclusion
Resources

Setting Up Jest

Steps:

Create a new directory, and cd into that directory.
Set up the NPM environment

mkdir jest-example && cd jest-example 
npm init -y

Install Jest

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.

// 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:

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.

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.

// 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.

// 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:

  // 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 or a complete list can be found in the official docs here

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:

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.

 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

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.

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.

  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:


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:


 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:

Conditional Function Invocation without Conditional Statements in JS

Daniel Sasse — Mon, 08 Mar 2021 04:56:25 +0000

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, but the gist of it can be seen below...(get it?)

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.

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:

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!

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:

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:

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.

Generating & Solving Sudoku in JS & Ruby with Backtracking

Daniel Sasse — Wed, 17 Feb 2021 17:50:15 +0000

Update:

Thank you 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.

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:

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.
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.
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, 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.

Backtracking

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.

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.

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

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

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. 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.

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.

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.

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.

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.

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

Resources

Full Code

Javascript
Ruby

Javascript - Full Code

JS Gist External Link

Ruby - Full Code

Ruby Gist External Link

Refactoring App Features into Modules in Ruby

Daniel Sasse — Wed, 20 Jan 2021 21:37:41 +0000

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 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) 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 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.

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.

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.

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.

DEV Community: Daniel Sasse

Implementing a Scroll To Top feature in React

Getting Started

Creating the Button

Conditionally Rendering the Button

Conclusion

Resources:

Algorithm Tutorial: Intro to Heaps - Heapify & Heap Sort

Contents

Heapify

Three Approaches

Measuring Efficiency

Heapify Implementation

Heap Sort

Resources

MaxHeap Class Gist

Algorithm Tutorial: Intro to Heaps and Priority Queue Implementation

Contents

Background

Heap Structure

Implementation

Initialization

Inserting Values

Extracting Values

As a Priority Queue

Full Code

Algorithm Tutorial: Max Area of an Island (DFS)

Contents

Problem Description

Problem Explanation

Solution

Modeling the Solution

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

setTimeout and setInterval

Incorporating Promises

Example:

Usage

Algorithm Tutorial: Champagne Tower Explanation

Contents

Problem Description

Problem Explanation

Modeling the Tower:

Solution

Implementing a Social Share Feature

Contents

Creating Share Links for Social Media

Creating Share links for SMS and Email

Email:

SMS

Displaying the Links

Beginner's Guide to Jest Testing in React

Getting Started

Contents

Setting Up The App

Anatomy of the Default Test

Planning the Tests

Describe the Tests

Counter Tests

Test #1:

Test #2

Test #3

Form Tests

Test #4

Test #6

Test #7

Implementing the Component

Conclusion:

Resources:

A Beginner's Guide to Unit-testing with Jest

Contents

Setting Up Jest

Identify Desired Actions

Initializing the Test File

Writing tests

Running the Tests

Writing the functions

Conclusion

Resources:

Conditional Function Invocation without Conditional Statements in JS

Reminiscing of Ruby's .send