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.

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 JavaScript 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 JavaScript on July 27th, 2022

How to use Fathom Analytics events to track ads conversions

In this blog post, I'll show you how and why I turned off conversion tracking in Google Ads and Microsoft Ads and started tracking ad conversions in Fathom Analytics instead. Bonus: No cookies!

Written by Codemzy in Software on July 13th, 2022

Create your own vanity link cloaking with Netlify redirects

After discovering link cloaking (and various services that manage, cloak and shorten affiliate links), I thought it would be pretty easy to set something basic up in Netlify for a static site. It was, and here's how you can do it!

Written by Codemzy in Deploy on June 27th, 2022

Using Dropbox as a headless CMS for a static blog

Need a simple place to store content instead of pushing it to your git repository? Need a non-coder to be able to add content? Dropbox might be the answer!

Written by Codemzy in Deploy on June 13th, 2022

How to get long lived access (refresh) tokens for Dropbox developer apps

When you generate an access token for the Dropbox API, it's usually short-lived and expires in 4 hours (or less for other users). Here's how to get a refresh token so that access is long-lived and doesn't expire.

Written by Codemzy in Software on June 13th, 2022

Why uppercase lists display as lowercase and how to fix it

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

How to add different ordered list types to markdown

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

Adding a video embed extension to Tiptap editor in ReactJS

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 JavaScript on May 18th, 2022

3 alternative ways you can trial Ahrefs in 2022

This year Ahrefs got rid of their 7 days for $7 trial, and don’t offer a free trial. But there are a few ways you can try out Ahrefs in 2022 without a paid account. Here are 3 of them.

Written by Codemzy in Software on May 6th, 2022

3 ways to connect your front-end web code to the back-end

Do you wonder how to connect your website to your server? Or maybe you're wondering about CDNs, API requests and serverless functions? And what's a static site? Here are 3 ways to connect the front-end of your website to the back-end.

Written by Codemzy in Deploy on April 27th, 2022

How to call a function in JavaScript

Once you know how to write a function in JavaScript, you also need to know how to call it. You can call it from your code, immediately, after an event, in your HTML, after a delay, or regularly. Let's see how.

Written by Codemzy in JavaScript on April 20th, 2022

Creating an isMounted hook with useEffect (ReactJS)

Although isMounted is deprecated in ReactJS, maybe you need it to prevent memory leak errors in your application. Learn why there are better ways to solve this problem, and how to create an isMounted hook with useEffect if you still need one.

Written by Codemzy in ReactJS on April 13th, 2022

How to use React useEffect like componentDidMount

Moving over to ReactJS hooks? Good choice! But how do you use useEffect like componentDidMount? And how do you clean up your code afterwards? Learn how to create custom componentDidMount and componentWillUnmount hooks with useEffect.

Written by Codemzy in ReactJS on April 6th, 2022

How to name a webpack chunk (including split and common chunks)

Naming your Webpack chunks helps you understand the contents of each bundle of code, and keep consistency between deploys. In this post, we look at named outputs, including dynamic imports, split chunks, and common chunks.

Written by Codemzy in Code on March 30th, 2022

Reduce your react bundle size with webpack code splitting

Is Webpack telling you your bundle sizes are too big? Is all of your ReactJS code in a single app.js bundle? In this blog post, I look at why you should try code splitting and how to split your code up into smaller chunks.

Written by Codemzy in ReactJS on March 23rd, 2022

How to fix ChunkLoadError in your ReactJS application

Do you or your users get a ChunkLoadError after your deploy updates? If you use code splitting and dynamic imports, old code can cause this issue. Here's how to fix it in React.lazy() with a custom function.

Written by Codemzy in ReactJS on March 16th, 2022

Stop the iOS keyboard hiding your sticky or fixed position header

If you have a sticky or fixed position header with a textarea or a contenteditable element, the soft keyboard can push it off the screen on iOS devices. Not good if you need it to stay visible during editing. Here's how you can fix it.

Written by Codemzy in JavaScript on March 9th, 2022

Creating a ReactJS drag and drop file upload component

Do you need to create a drag and drop file upload component in React? This blog post has you covered. Build a component that listens to drag events, handles drops, and falls back to the traditional file picker.

Written by Codemzy in ReactJS on March 2nd, 2022

ReactJS header that disappears on scroll down and appears on scroll up

Want the convenience of easy access to a sticker header, without it getting in your way all of the time? Here's how you can hide your sticky header when scrolling down, and get it back as soon as you scroll up!

Written by Codemzy in ReactJS on February 23rd, 2022

234
5
6

Categories