Explore

Snippets

Short solutions to discrete problems.

Add a Copy to Clipboard Button in MDX with Next.js

How to create a copy to clipboard button using Rehype Pretty Code.

#Javascript

Set up a Mac for Development

A clean, repeatable, process to setup a MacOS machine and keep multiple MacOS machines similarly configured

#Javascript

Deep Cloning Objects in JavaScript

The global structuredClone() method creates a deep clone of a given value using the structured clone algorithm.

#Javascript

Select a random row from a database table

There are lots of ways to select a random record or row from a database table. Here are some example SQL statements that don't require additional application logic, but each database server requires different SQL syntax.

#SQL

Nextjs Hotkeys

Here is the easiest way to implement "hot keys" in a Nextjs app using the app router.

#Javascript#React Hook#React Component#Nextjs

Async/await functions in parallel

To speed up our code lets look at some ways to run promises in parallel. This can be useful when performing multiple database queries to render a web page and you want to run the queries in parallel rather than seqentially.

#Javascript

Easier Imports

Import from folders like /components, /utils or /hooks from @/anywhere in your codebase.

#Javascript#Typescript

Classnames

There is no need to import classnames from NPM - instead use this simple function.

#Javascript#CSS

Wait

Sometimes when you are testing, or playing around, you just want to simulate some delay. Here's a simple way to do just that.

#Javascript

Next.js 13 NavLink Component

This snippet shows how to create a custom NavLink component in Next.js 13 that extends the built-in Link component to add CSS classNames when the href attribute matches the current URL.

#Javascript

Embed a Tweet in .mdx

Sometimes you just want to add a Tweet to a post. Should be simple, right? With .mdx you have some different choices that are worth considering.

#Javascript#React Component

Infinite Scroll

This is a clean, understandable way to implement an infinite scroll in a React/Next application. Cheers!

#Javascript#React Component

React Hooks

I have documented some React hooks I find useful but there are many, many hooks out there. Here are some great React Hooks resources. Cheers!

#Javascript#React Hook

Google Tag Manager

Implementing Google Tag Manager in Nextjs.

#Javascript

Debounce

Debouncing is a strategy that lets us improve performance by waiting until a certain amount of time has passed before triggering an event.

#Javascript

Framer Motion

Animated slide in pane component with Framer Motion

#Javascript

Get the last segment of a URL

How to get the last segment of a path or URL using JavaScript.

#Javascript

Parsing MDX files

Compile and bundler MDX files with mdx-bundler

#Javascript

Recursive Timeout

Recursive timeout function that can be used for timed events.

#React Hook

useHasMounted

When dealing with a server-side rendered application it can be useful to know when you are rendering on the client.

#React Hook

useMediaQuery

useMediaQuery is a react hook that makes testing for media query matches in your code easier and simpler.

#React Hook

usePrefersReducedMotion

Some people do not prefer animations, and for some motion can be harmful. The prefers-reduced-motion CSS media query allows us to disable animations.

#React Hook

Web Vitals

Web Vitals is an initiative by Google to provide unified guidance for quality signals that are essential to delivering a great user experience on the web.

#Javascript

Google Analytics API

Using Google Analytics API to get page data.

#Javascript

useIntersectionObserver

The Intersection Observer API allows you to configure a callback that is called whenever an element intersects either the device viewport.

#React Hook

SEO

Adding SEO using a wrapper container

#React Hook