codeBelt

/**
 * A UI component that visually indicates the active Tailwind CSS breakpoint
 * on the screen. It shows a floating indicator in the bottom-right corner of the page,
 * displaying the current breakpoint based on the viewport width.
 *
 * This component is only rendered in development mode (`process.env.NODE_ENV !== 'production'`),
 * helping developers quickly identify the active breakpoint while building responsive layouts.
 *
 * It uses the following breakpoints based on the default Tailwind CSS configuration:
 * - XS (extra small) — `sm:hidden`

codeBelt

https://www.basedash.com/blog/typescript-object-with-dynamic-keys

Constrained Dynamic Keys At times, you'd want to constrain the dynamic keys to a specific set of values, perhaps based on another array or tuple.

const validKeys = ['a', 'b', 'c'] as const;

type ValidKeysType = typeof validKeys[number];

codeBelt

import SingletonRouter, { Router } from 'next/router';
import { useEffect } from 'react';

const defaultConfirmationDialog = async (msg?: string) => window.confirm(msg);

/**
 * Inspiration from: https://stackoverflow.com/a/70759912/2592233
 */
export const useLeavePageConfirmation = (
  shouldPreventLeaving: boolean,

codeBelt

Built with D3js and Cartogram.js. Province and territory data obtained from the Government of Canada's Open Data Portal.

codeBelt

// JavaScript Version

export const buildFirstMiddleLastList = (list) => {
  const { 0: first, [list.length - 1]: last, ...rest } = list;

  return {
    first: first,
    middle: Object.values(rest),
    last: list.length > 1 ? last : undefined,
  };

codeBelt

// JavaScript Version

export const buildFirstMiddleLastList = (list) => {
  const { 0: first, [list.length - 1]: last, ...rest } = list;

  return [
    first, 
    Object.values(rest), 
    list.length > 1 ? last : undefined
  ];

codeBelt

const arrayData = ['a', 'b', 'c', 'd', 'e'];

codeBelt

const arrayData = ['a', 'b', 'c', 'd', 'e'];

arrayData[0]; // First element is "a"
arrayData[arrayData.length -1]; // Last element is "e"

// Middle elements
arrayData[1]; // "b"
arrayData[2]; // "c"
arrayData[3]; // "d"

codeBelt

const arrayData = ['a', 'b', 'c', 'd', 'e'];

const { 0: first, [arrayData.length - 1]: last, ...rest } = arrayData;

codeBelt

const withPlugins = require('next-compose-plugins');
const path = require('path');

module.exports = withPlugins([], {
  webpack: (config) => {
    const clientEnv = process.env.CLIENT_ENV || 'production';

    config.resolve.alias = {
      ...config.resolve.alias,
      environment: path.join(__dirname, 'src', 'environments', clientEnv),