Code

These are posts about code I write. Expect lots of JavaScript, ReactJS and Regex content.

Using Array join() on an object property

You can use Array.join() on an array of objects, but `join()` will only work with strings, so you need to get the property value(s) first. Let's look at some examples.

Written by Codemzy in Code on May 30th, 2023

How to prevent an icon wrapping to a new line with JavaScript

In this blog post, I create a javascript function to separate the last word in a string, so I can keep it attached to an inline icon, to prevent the icon from wrapping to a new line on its own.

Written by Codemzy in Code on May 25th, 2023

How to sort an array of objects in JavaScript

You can sort any array of objects in JavaScript using the `sort()` method and giving it a compare function with the property value you want to sort by. Here's how it works with examples.

Written by Codemzy in Code on May 22nd, 2023

React Query isLoading vs isFetching (and when to use them)

What's the difference between `isLoading` and `isFetching` in React Query? When would you use one and not the other? Let's figure it out and show a nice loading spinner to our users.

Written by Codemzy in Code on April 28th, 2023

How to delete an S3 folder recursively with aws-sdk in Node.js

In this blog post, we will create a function to delete a folder or directory in AWS S3. Because folders don't actually exist in S3, the function will get the objects at the prefix, and recursively delete them all.

Written by Codemzy in Code on April 19th, 2023

How to upload or disable pasting images in Tiptap

Once you add the Image extension to the Tiptap WYSIWYG editor, users can paste images in from HTML and the clipboard. That may (or may not be) what you want to happen. Here's how I handled image pasting in Tiptap.

Written by Codemzy in Code on February 27th, 2023

Debounce and cancel in ReactJS (+ useDebounce custom hook)

In the blog post, we'll create a useDebounce custom hook to delay function calls with React's useCallback and a little time travelling magic. We will also cancel our debounced function when the component unmounts or dependencies change.

Written by Codemzy in Code on February 15th, 2023

Adding drag and drop image uploads to Tiptap

Need to be able to drag and drop image files into your Tiptap WYSIWYG editor? Tiptap is highly customisable, so let's add some drag-and-drop magic to the Image extension.

Written by Codemzy in Code on January 27th, 2023

How to generate a random unique ID with JavaScript

If you need a simple short ID and don't have any complex requirements for it, then a simple JavaScript function could be all you need. Here's the function I use to create a random unique ID in JavaScript, and an explanation of how it works.

Written by Codemzy in Code on January 13th, 2023

Autosave user input in ReactJS with setInterval (+ useAutosave custom hook)

Here's a custom hook for adding an autosave feature to ReactJS, without ending up with stale data. It uses setInterval to trigger the save, useEffect to keep things clean, and useRef to keep your save functions fresh.

Written by Codemzy in Code on December 16th, 2022

A future-proof Node.js express file/folder structure

How should we structure folders and files in Node.js? I was unhappy and slightly confused by the MVC approach, and wanted to move to a more colocation/feature-based structure. Here's what I came up with.

Written by Codemzy in Code on November 28th, 2022

Fine-tuning invalidateQueries with React Query (v4)

This post will cover how you can specify which queries to invalidate in ReactQuery with queryClient.invalidateQueries(). Here's how to target single queries, multiple queries, active queries and inactive queries.

Written by Codemzy in Code on October 13th, 2022

Why cacheTime in React Query should always be bigger than staleTime

In React Query, the cacheTime and staleTime options impact how long data gets stored on the client and how often it's re-fetched from the server. Let's look at the difference between cacheTime and staleTime - and how changes to one can impact the other.

Written by Codemzy in Code on September 28th, 2022

How to render an array of objects in ReactJS

If you try to render an array of objects in ReactJS, you might run into errors. Because ReactJS can't render the object. But you can loop over the array and turn it into something ReactJS can render, like a string or JSX.

Written by Codemzy in Code on August 31st, 2022

How to use Array.map() on an object in JavaScript

Looping over arrays is fairly easy in JavaScript, but harder with objects, because you can't use array functions like `Array.map()`. Or can you?

Written by Codemzy in Code on August 24th, 2022

Conditionally adding a property to an object in JavaScript

Here's the conditional object property pattern. It uses the spread syntax (...) to conditionally add a property to an object, or an item to an array. Perfect when you (sometimes) want to add a key to an object.

Written by Codemzy in Code on August 15th, 2022

Copying an object without a property or key in JavaScript

Copying objects in javascript can get complicated if you only want to copy part of an object, or if there is a property or key that you don't need. Instead of copying the entire object and then deleting a property, you can just copy what you need with object destructuring.

Written by Codemzy in Code on July 27th, 2022