Dan Stroot

Snippets

Short solutions to discrete problems.

Set up a Mac for Development

Compile and bundler MDX files with mdx-bundler
#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

Adding Syntax Highlighting in Nextjs

If you want to show example code on a page in Nextjs you will help your readers by implemeting some form of syntax highlighting. Here's how.
#Javascript

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

Test Title Which is REALLY Long Because it Keeps Going

You are contributing value, whether you like it not, when you make your code public. Training machine learning models on publicly available data is considered fair use across the machine learning community. The models gain insight and accuracy from the public collective intelligence. The only way to extract value back out is to use Copilot yourself.
#Javascript#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