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 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). …
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.
== 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.
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. …
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
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. …
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. …
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.
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.
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. …
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
name. You can access the attributes like so.
var id = user.id
This, however, will break your code if
user for whatever reason is
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 …
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.offsetX to determine the
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.