There was a recent feature request at work that called for picking a random number to represent an index for an array of objects. We needed this logic to create a new, smaller collection of randomly selected items from the original array.

In this article, I’ll talk about how to use Math.random() to generate a random number between two numbers.

“The Math.random() function returns a floating-point, pseudo-random number in the range 0 to less than 1 (inclusive of 0, but not 1) with approximately uniform distribution over that range — which you can then scale to your desired range.” …

I was recently working on a way to sort an array of objects alphabetically based on two columns. This means that both levels of alphabetical sorting should be maintained. See the example below.

var fruits = [
  {colA: 'apple', colB: 'red delicious'},
  {colA: 'pear', colB: 'red anjou'},
  {colA: 'orange', colB: 'navel'},
  {colA: 'orange', colB: 'blood'},
  {colA: 'pear', colB: 'green anjou'},
  {colA: 'apple', colB: 'granny smith'},
  {colA: 'orange', colB: 'clementine'}
]

The above list is supposed to be sorted to look like the below array.

[
  {colA: "apple", colB: "granny smith"},
  {colA: "apple", colB: "red delicious"},
  {colA: "orange"…

Imagine you receive a specific image from the product team that is meant to act as an icon for a button. The button has a white background, black border, black text, and the image itself is darker.

I recently went through my old dev projects and came across a JavaScript code challenge I did for Amazon. I had about half an hour to do it, and while I couldn’t complete it within that time frame back then, I decided to give it another try.

The challenge required a function that takes an array of task objects, and based on the depends property in each object, evaluates each task. Below is the original array:

For this case, the function needs to loop through and log Task #n is complete where n is the object’s id. …

I recently came across an interesting code challenge that consisted of a few questions. The first question can be seen below:

“We love word clouds! Given the following text, print a list of all the words used and the number of times they appear. Please ignore punctuation and other uninteresting characters. Words should not be case-sensitive.”

We can break this challenge down into a few parts.

1. Remove All Punctuation and “Uninteresting” Characters

We can accomplish this by implementing a quick regular expression:

text.replace(/[^A-Za-z]+/g, " ")

The code above is more effective because you don’t have to have a separate array containing all punctuation marks. This regex…

Until February of this year I had been living at home with my mom. Despite having decent savings and enough monthly income to afford rent, I was compelled to stay at home.Why?

Money, duh

I was recently tasked with implementing logic that captures react components with their data visualizations on the web page and exports it as an image. Other data visualization libraries (such as Highcharts) allow for graphs to be exported as an image. However, we needed one to export multiple graphs and tables on a page at once.

This is where html2canvas comes in handy.

This package generates a “screenshot” by reading DOM elements, their styles, and then generating a canvas image from that data. It operates purely on the client side so you don’t have to worry about any requests/server support.

…

In a previous post, I provided a potential use case for object indexing to avoid overusing array functions in a react application. While it does illustrate the applicability of object indexing, Vachev T pointed out that it might not have been the best example as there was a more efficient alternative.

The idea is good, I just dont understand why so we have to remap the object in the useEffect and create new indexed object, why dont we simply use the original array and when mapping the list of items in the render function, we just use the index argument…