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.

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

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.

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

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

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

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.

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.

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

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!

Implementing Google Tag Manager in Nextjs.

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

Animated slide in pane component with Framer Motion

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

Compile and bundler MDX files with mdx-bundler

Recursive timeout function that can be used for timed events.

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

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

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.

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.

Using Google Analytics API to get page data.

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

Adding SEO using a wrapper container