These are posts about code I write. Expect lots of JavaScript, ReactJS and Regex content.
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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 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
Are you trying to use custom CSS with different list types, but running into problems with uppercase lists displaying as lowercase and visa-versa? Me too! Here's more info on the problem, and how you can fix it.
Written by Codemzy in Code on June 1st, 2022
One thing I always found missing from markdown was different list types, specifically, letter and roman numeral lists. In this blog post, I'll add these list types to the popular MarkedJS markdown compiler.
Written by Codemzy in Code on May 27th, 2022
Videos are pretty popular on the web these days. But what if your users want to add them to content? Here's how I added YouTube and Vimeo video embeds to Tiptap editor in ReactJS.
Written by Codemzy in Code on May 18th, 2022