natterstefan

// function to generate a random number within a range
function getRandomNumber(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

// function to generate a random mouse coordinate within the viewport
function getRandomCoordinate() {
  const x = getRandomNumber(0, window.innerWidth);
  const y = getRandomNumber(0, window.innerHeight);
  return { x, y };

natterstefan

Next.js | Catch-All route including index

natterstefan

react-i18next and TS2589: Type instantiation is excessively deep and possibly infinite.

The patch works both with tsc and next build, as described in the comments of the patch.

Inspired by

• i18next/react-i18next#1417 (comment)

natterstefan

/**
 * inspired by
 * @see https://codesandbox.io/s/use-previous-hook-persistent-with-matcher-hujqez?file=/src/hooks.tsx:0-1069
 * @see https://www.developerway.com/posts/implementing-advanced-use-previous-hook
 * @see https://usehooks.com/usePrevious/
 */
import { useRef, useEffect } from 'react'

export const usePrevious = <TValue>(value: TValue) => {
  const ref = useRef<TValue>()

natterstefan

Plesk and nginx Caching

Links

• How to enable leverage browser caching for nginx? – Plesk Help Center
• How to enable/disable gzip compression in nginx on a Plesk server – Plesk Help Center
• When Nginx caching is enabled with Plesk's default settings, all pages with a cookie is not be cached – Plesk Help Center

natterstefan

/**
* Works in Next.js 10.x
*/
import React from 'react'
import parse, {
  domToReact,
  attributesToProps,
  Element,
  HTMLReactParserOptions,
} from 'html-react-parser'

natterstefan

Storybook | Tailwind in Next.js App with Webpack@5

Installation

# install storybook dependencies
yarn add @storybook/addon-actions @storybook/addon-essentials @storybook/react -D
yarn add @storybook/addon-postcss@latest -D

# install webpack5 dependency

natterstefan

# We make use of ARG to set some variables that we
# can use in the Dockerfile
ARG node_version=14
ARG node_image=node:${node_version}-alpine

# STAGE 1: This is the "builder" stage where we build the
# application and give this step a name: "builder"
FROM $node_image as builder

ENV NODE ENV=production

natterstefan

# We use the latest nodejs@14 image as our base image
FROM node:14-alpine

# set the default NODE_NEV to production
ENV NODE ENV=production

# make sure everything happens inside the /app folder
WORKDIR/app

# now we cache the node_modules layer

natterstefan

asdf global <name> <version> [<version>...]
asdf shell <name> <version> [<version>...]
asdf local <name> <version> [<version>...]
# asdf global nodejs 14.15.4