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…

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 wrote an article about capturing React components as images and shared it on Reddit. One redditor commented on it, saying that while the library is robust, they used another one that they thought performed a bit better:

“A similar library that I ultimately ended up using was html-to-image. Much much faster and not only converts components to canvas but directly to png/blob/svg.”

We use html2canvas in another part of our application where we need to download multiple visualizations as separate images, zip them, and then download them. It works fine, but I have to say the performance can…

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…

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

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…