Home
About
Archive
Snippets
Toggle Menu
Snippets
Short solutions to discrete problems.
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
