Codemzy's Blog

Hello! I am Codemzy and I love to code. JavaScript is my favourite flavour. I blog about coding, software and my projects.

useRef to get the width and height of an element in ReactJS

In this blog post, we will `useRef` to get the width and height of a DOM element in ReactJS. We will also add an event listener to listen to the resize event for width and height changes.

Written by Codemzy in ReactJS on September 2nd, 2024

Catching MongoDB E11000 duplicate key error in Node.js

Unique indexes are useful in MongoDB for preventing duplicate data. Here's how I catch the duplicate key error so I can send a human-readable response to let users know what the problem is.

Written by Codemzy in Node.js on August 16th, 2024

How to generate 4 digit random number code in JavaScript

Here's a JavaScript function I built to create a random 4-digit OTP code with leading zeros. And how I extended it to create shorter and longer codes too!

Written by Codemzy in JavaScript on July 3rd, 2024

Pretty print JSON responses with Express

Here are some ways you can pretty print your JSON responses to the browser with Express in Node.js - either globally or for a single route, using the `space` property of `JSON.stringify()`.

Written by Codemzy in Node.js on June 27th, 2024

How to upload files to DigitalOcean Spaces with Node.js

In this blog post, we will create a function to upload a file to DigitalOcean Spaces using Node.js and the AWS SDK.

Written by Codemzy in Node.js on May 29th, 2024

React axios interceptor examples (with hooks & context)

Axios works great with React, but if you want to use hooks or context within your interceptors you might find it a little tricky. In this blog post, we'll look at a couple of ways you can get hooks in your interceptors, and create an axios context provider for React.

Written by Codemzy in ReactJS on May 17th, 2024

React authentication examples (context, React Query, & both!)

How do you handle authentication in your React app? In this blog post, I'll set up auth state with context and React Query - and then use them together for the best of both worlds!

Written by Codemzy in ReactJS on May 3rd, 2024

Creating a CSP report-uri endpoint with Cloudflare functions

Here's how I used Cloudflare functions to create a "report-uri" endpoint for my CSP policy. The Cloudflare worker gets the CSP violation report and logs it so I can review and react!

Written by Codemzy in Deploy on April 12th, 2024

How to get response body from fetch() in javascript

When you use the JavaScript Fetch API, `response.body` might not work like you hoped it would. So if you run into errors like "Cannot read properties of undefined (reading 'body')", this blog post will help you fix it!

Written by Codemzy in JavaScript on April 11th, 2024

Using arrays for multiple conditional class names in React

The `className` prop can get pretty messy in React once you start adding multiple conditional class names to it. Here's how I use an array to avoid extra whitespace and confusing code.

Written by Codemzy in ReactJS on March 21st, 2024

How to move files in AWS S3 to another folder or bucket

In this blog post, we will create a function to move files to another folder or bucket in AWS S3. Because you can't move files in AWS SDK, we will copy the files to the new location and then delete the originals.

Written by Codemzy in Node.js on March 6th, 2024

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 Node.js on March 5th, 2024

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

In this blog post, we will create a function to copy a folder or directory in AWS S3. We need to do a bit of extra work to copy objects because folders don't exist in S3 - even if it seems like they do!

Written by Codemzy in Node.js on February 9th, 2024

How to get response headers in axios (and access missing headers)

You can access response headers in axios from the response per request, or by adding an interceptor to all requests. If the headers are missing or undefined, you might need to fix your CORS settings.

Written by Codemzy in JavaScript on January 31st, 2024

Using MongoDB project to change a field name (without aggregation)

If your MongoDB data doesn't match up with the response object you need to provide, you can use `.project()` to change a field name and respond with a different field name instead!

Written by Codemzy in Node.js on January 24th, 2024

How do you find all the HTML tags in regex?

If you have an HTML string, and you need to find all the HTML tags with regex, here's the Regular Expression code you can use to do it.

Written by Codemzy in Code on January 18th, 2024

How to get HTML attributes using regex

If you need to get HTML attributes, to check them or replace them, regex could hold the answers! Here's the Regular Expression I use, and a step-by-step guide for how I built it.

Written by Codemzy in Code on January 18th, 2024

Force refetch with React Query

You can invalidate an active query to get it to force refetch with React Query. Here's how you can force refetch after a mutation, or on a button click, to check for updated data.

Written by Codemzy in ReactJS on December 4th, 2023

MongoDB skip and limit order is important in aggregation

Here's something that caught me out this week - skip and limit order in MongoDB. The order of skip and limit isn't important in chaining (like `find` commands) but it is important in aggregation.

Written by Codemzy in Node.js on November 23rd, 2023

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 ReactJS on November 21st, 2023

2 3 4 5