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 was able to incorporate it with my own components in just a few minutes. For this demo, we’ll be creating a to-do React app (original, I know). …


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.


When to use the double or triple equals operator?

Image for post
Image for post
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 to learn more. …


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, this method of compilation isn’t a bad idea. However, if you add new features, apps, or packages to your project, that bundle file can get pretty large. …


Stop Overusing Array Functions

Image for post
Image for post
Photo by Glenn Carstens-Peters on Unsplash

JavaScript array methods can be pretty convenient, but sometimes they can be overused. These array functions are easy to recall and the small amount of code/reduced complexity may lead a developer to rely too heavily on them when they may not be the most efficient method. Which brings us to the topic of this post, object indexing.

Indexing allows us to associate an object in a collection with a certain number (or index) that is associated with it. Similar to how an item in array can be accessed by using the index of that item, you can index items in an object to make them accessible at a certain key. …


A convenient library for viewing pdfs on the web

Image for post
Image for post
Photo by Susan Yin on Unsplash

There was a recent feature request at work for viewing pdf files in the application. A user should be able to click on a component containing a pdf and open that pdf in a modal. In that modal the user can navigate the pages of that pdf file. In this post, I’ll show you how I was able to achieve this with relative ease thanks to a library called react-pdf-js.

react-pdf-js is not to be confused with react-pdf. I tried using react-pdf first but I found it to be pain trying to configure it to work in our application. After about an hour of debugging with no luck, I decided to seek an alternative. …


Not just when the component mounts.

Image for post
Image for post

I’ve come across a few blog posts, such as this one, about how to manage setInterval with hooks when your functional component mounts. This works if you want to set it and forget, but for my case I needed something a bit more dynamic. I’m converting a vanilla JS photo booth app I made to a react app, and one of the features involves taking a “burst” of photos.


Be better.

Image for post
Image for post
Photo by Brad Barmore on Unsplash

During quarantine, I have been able to better prioritize my mental and physical health, learn new things and actively work towards being a better me. In the morning, I meditate and say my prayers. Before quarantine, I would ask God to help me be the best version of myself. Pretty standard request, no? It wasn’t until I was in quarantine for a few weeks that I started to second guess the rhetoric I was using in my prayers.

What is “The Best Version” of Myself?

There are certain scenarios where being the best is something defined and quantifiable. Such is the case with athletes or salespeople. Someone can be considered the best at chess if they are able to defeat all other chess champions. …


And Proposed Syntax to Support Object Destructuring

Image for post
Image for post
Photo by Miltiadis Fragkidis on Unsplash

This ES2020 feature allows you to optionally access an attribute without having to check if the object is defined or not null. Imagine a user object, it contains username, id and name. You can access the attributes like so.

var id = user.id

This, however, will break your code if user for whatever reason is undefined or null. Traditionally, to conditionally access attributes and store them as variables, you’d need to write something like the below.

var id = user ? user.id : null 

Thanks to ES2020, and the optional chaining operator, we can shorten the above code using ?..

var id = user?.id …


The Difference Between event.pageY And event.offsetY

Image for post
Image for post
Photo by Yasin Hasan on Unsplash

I recently answered a question on Stack Overflow where the OP wanted an HTML element to follow the user’s cursor. OP gave the HTML element (a div) absolute positioning and was using event.offsetY and event.offsetX to determine the top and left CSS values. The end result was a ‘glitchy’ circle that followed the cursor but would jump back to the top left corner of the document.

About

Matthew Croak

UI Engineer at Analytic Partners 📲 💻 📈 | Dog Lover 🐶

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