Quick and easy randomization

Dice
Dice
Photo by Edge2Edge Media on Unsplash.

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


One sort function, two sort orders

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", colB: "blood"}, {colA…


Just because you got an image in a certain color doesn’t mean it has to stay that way

Ladybug on a leaf
Ladybug on a leaf
Original photo (no BW) by Alexandre Debiève on Unsplash.

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.


Using html2canvas

Photo by Carlos Muza on Unsplash

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.


Another example for how to stop overusing array functions

Photo by Farzad Nazifi on Unsplash

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…


An 8-step guide to making it work

Lantern in the night
Lantern in the night
Photo by Zach Lucero on Unsplash.

create-react-app is a convenient way for React developers to initialize a new React application without having to worry about boilerplate templates, configuration, etc. It can save time and effort so you can get right into developing your app!

Theoretically, using create-react-app is as easy as this:

npx create-react-app my-app
cd my-app
npm start

However, you might run into an issue preventing create-react-app from executing — even if you’ve used it on your machine before.

In my case, I got the following message:

You are running create-react-app 4.0.0, which is behind the latest release (4.0.1). …


A few minutes to help relax, rebalance, and refocus.

Photo by Fabian Møller on Unsplash

As developers, the work we do can be quite intensive. Debugging, optimizing features, implementing new ones, basically round the clock problem solving. This is why it’s so easy for a developer to get lost in code for hours without taking breaks. If the environment becomes too stressful and self care isn’t prioritized, you can experience burnout.

That being said, sometimes deadlines are too close or new developments (no pun intended) arise and you simply can’t stop work for too long. In this post, I will share four breathing exercises that I have found helpful whenever I experience the throws of…


Easy and effective sorting

Woman taking notes
Woman taking notes
Photo by Cathryn Lavery on Unsplash.

I was recently working on a code challenge that involved adding/removing items from a list as well as organizing them in a particular order. To avoid any extraneous navigation or elements, I decided to implement drag-and-drop logic in order to make my items easy to move from one position to another.

There are a lot of great libraries for drag-and-drop functionality in React, but some of them require a bit more configuration and offer more than I needed. Eventually, I ended up using react-sortable-hoc.

react-sortable-hoc

react-sortable-hoc is an easy-to-use library when you need a list of components to be sortable. I…


When to use the double or triple equals operator?

Photo by Dietmar Becker on Unsplash

When comparing values in JavaScript, you might come across an equality operator consisting of two or three equals symbols. For example:

== or ===

For the most part, these two can be used interchangeably but there is an important distinction to make depending on how you want the comparison to be evaluated. The distinction between these two symbols comes down to the compared values types.

JavaScript has six primitive data types includingstring, number, undefined, null, boolean, and symbol. While we won’t focus too much on the specifics of each type now, this post can provide valuable insight should you want…


Optimize production builds with code splitting

Yellow and gray diagonal pattern
Yellow and gray diagonal pattern
Photo by Drew Beamer on Unsplash

Code splitting is a very useful tool when it comes to reducing the size of your builds. It allows you to parse (or split) your code into different bundles that can be loaded conditionally based on what is currently needed.

Let’s say you have a suite of e-learning applications for different classes and levels of education. You can compile all of the code for each of those apps into one build file that gets served to the browser when you hit the landing page (which contains links to all the apps).

As long as your build file isn’t too large…

Matthew Croak

Code 📲💻 Wellness 🧘🏻‍♂️😌

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store