DEV Community: Ellis

Shortest js compare function, by 6 AI machines

Ellis — Mon, 07 Oct 2024 08:21:16 +0000

I asked 6 different AI machines

I want a shortest possible javascript function. Input parameters: a and b (both can be of any type). Output: if a < b then return an arbitrary negative number, if a > b then return an arbitrary positive number, if a equals b then 0.

(This is a standard, very common "compare" function. We typically use it like: const sorted = array.toSorted(compare);

-- Date: 7 Oct 2024.
-- All using unpaid versions as available on the internet.
-- Only Claude required a login.

Google Gemini, MS Copilot, Phind, Perplexity, Claude all produced the same result:
(a, b) => a < b ? -1 : a > b ? 1 : 0

Only "Chatgpt 4o mini" produced:
(a, b) => (a > b) - (a < b)

(The first one is commonly known. The reason I asked this question in the first place: this common one has always looked a bit cluttery/clunky to me. As for the second one, I'd be interested to know if anyone has every heard of it. The first one has: 13 elements, the second one: 7 elements, by one way of counting.)

Afterwards I asked Chatgpt

Which of the above functions will execute faster in real time?

It answered:

Number of comparisons: f1 always performs two comparisons regardless of the input. f2 may perform only one comparison if the first condition (a < b) is true.
Operation cost: Both functions return a small, constant amount of data, but the arithmetic in f1 involves a subtraction, which could be slightly more expensive than just returning a value directly.
Conclusion: In most cases, f2 would be faster due to potentially needing only one comparison and avoiding the subtraction operation.

My conclusion

This suggests to me that, within the limits of this small experiment, "ChatGPT 4o mini" distinguishes itself from the other five with a more capable and deeper calculation power.

Benchmark

I wrote a js program to compare the sorting times on a shuffled array of the integers 1 to 100,000,000. I ran the program a number of times with Node on Windows. The result suggests an equal speed. (The difference is in the order of 1%.)

React tool to instantly change your site's colours

Ellis — Tue, 23 Jul 2024 09:44:14 +0000

The goal

I wanted to see how simple, easy and effective it would be to create an internal page for a website where the designer could use a couple of sliders to change the site colours and immediately see what the entire website and all the component would look like.

Internal: we probably don't need the page to be secret, but we don't need to advertise it to the user via any menus or links.
Effective: it should give the designer an effortless, immediate, good view of what the site and components would look like.

Techniques used

React, typescript, styled-components,
and obviously: html, css and javascript.

OKLCH color space

After comparing various CSS colour spaces available, I chose OKLCH to be ideal for this purpose, because:

OKLCH is a colour space (or a colour function) which has been normalised such that: once we have selected a fixed value for lightness "L" and colour intensity "C" (aka chroma), we can change the colour hue "H" of an object freely, and the colour will keep looking good with this constant L and C. This exactly fits our use case here.
So for each colour we first choose a fixed L and C value to our liking, then we play with the H value using a slider.

More info about OKLCH:

web docs,
this blog which includes the following picture:

In sRGB (left), a straight line is drawn between the two colors. In OKLCH (right), an arc is drawn along the hues to reach the second color.

OKLCH parameters

Lightness L: 0% for black, 100% for white.
Colour intensity (or chroma) C: 0 for gray, no max, typically around 0.1 or less than 0.5.
Colour hue (the colour itself) H: 0 to 360 (360 = 0).
(A fourth parameter alpha provides opacity, which we won't be using here.)

Example:

color: oklch(70% 0.3 150) /* bright green */

The global index.css file for the site

(Don't worry too much about the colour names, you could choose better ones. :)

:root {
  /* OKLCH HUE VALUES: */
  --color1: 144; /* green */
  --color2: 90; /* brown */

  --color-primary: oklch(65% 0.1 var(--color1));
  --color-primary-lighter: oklch(70% 0.1 var(--color1));
  --color-disabled: oklch(70% 0.05 var(--color1));

  --color-border: oklch(76% 0.1 var(--color2));
  --color-border-darker: oklch(64% 0.17 var(--color2));

  --color-border-gray: #aaa;
  --color-border-light: #ccc;

  --color-whitish: #f0f0f0;
  --color-blackish: #444444;
}

button {
  background-color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

Design page - Colours tab

Sections on this tab:

Colours: four boxes to showcase text each colour (with white/black fg/bg).
Hue selection: two sliders, one for each main colour hue.
Sample components: a small number of components to view on this page with the new colours.

When we change the colours, we can browser through the entire website to immediately see the new look.

When we are happy with the new values, we can go and update the colour hue values in index.css:

  /* OKLCH HUE VALUES: */
  --color1: 144; /* green */
  --color2: 90; /* brown */

ColoursTab component

import styled from "styled-components";

import {
  ColourShift,
  ComponentCardButton,
  ComponentCardPaging,
  PageTabContent,
  SectionTitle,
} from "../components";

const Section = styled.div`
  display: flex;
  flex-direction: column;
  gap: 10px;
`;

// ------------------------------------
type BoxProps = {
  c?: string;
  fg: string;
  bg: string;
};

const Box = ({ c, fg, bg }: BoxProps) => {
  return (
    <p
      style={{
        width: "130px",
        padding: "6px 6px 9px",
        backgroundColor: `var(--color-${bg})`,
        color: `var(--color-${fg})`,
        overflowWrap: "anywhere",
        borderRadius: "4px",
      }}
    >
      {c}
    </p>
  );
};

// ------------------------------------
type ColourProps = {
  colour: string;
};

const Colour = ({ colour }: ColourProps) => {
  return (
    <div
      style={{
        display: "flex",
        gap: "10px",
        justifyContent: "space-between",
        //
      }}
    >
      <Box c={colour} fg="whitish" bg={colour} />
      <Box c={colour} fg="blackish" bg={colour} />
      <Box c={colour} fg={colour} bg="whitish" />
      <Box c={colour} fg={colour} bg="blackish" />
    </div>
  );
};

// ------------------------------------
const ColoursTab = () => {
  return (
    <PageTabContent>
      <Section>
        <SectionTitle>Colours</SectionTitle>
        <p>
          <b>global variable: color1</b>
        </p>
        <Colour colour="primary" />
        <Colour colour="primary-lighter" />
        <Colour colour="disabled" />
        <br />

        <p>
          <b>global variable: color2</b>
        </p>
        <Colour colour="border" />
        <Colour colour="border-darker" />
        <br />

        <p>
          <b>misc</b>
        </p>
        <Colour colour="border-gray" />
        <Colour colour="border-light" />
        <Colour colour="blackish" />
        <Colour colour="whitish" />
      </Section>

      <Section>
        <SectionTitle>Hue selection (oklch, 0..359)</SectionTitle>
        <ColourShift name="color1" />
        <ColourShift name="color2" />
      </Section>

      <Section>
        <SectionTitle>Sample components</SectionTitle>
        <ComponentCardButton isRow />
        <ComponentCardPaging />
      </Section>
    </PageTabContent>
  );
};

export default ColoursTab;

ColourShift component

Component:

The code:

import { useEffect, useState } from "react";
import styled from "styled-components";

import { useCssGlobalVariables } from "../hooks";
import GradientBar from "./GradientBar";

const Container = styled.div`
  border: 1px solid var(--color-border-gray);
  border-radius: 8px;
  box-shadow: var(--box-shadow);
`;

const InputContainer = styled.div`
  padding: 1px 10px;
`;

type InputProps = {
  $colour: string;
};

const Input = styled.input<InputProps>`
  width: 100%;
  accent-color: ${({ $colour }) => $colour};
`;

// ------------------------------------
type Props = {
  name: string;
};

const ColourShift = ({ name: name }: Props) => {
  const {
    getCssGlobalVariable,
    setCssGlobalVariable,
  } = //
    useCssGlobalVariables(`--${name}`);

  const [hue, setHue] = useState("");

  // ---------------------------------
  useEffect(() => {
    const h = getCssGlobalVariable();
    setHue(h);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const onChange = (h: string) => {
    setCssGlobalVariable(h);
    setHue(h);
  };

  // ------------------------------------
  return (
    <Container data-testid="ColourShift">
      <GradientBar title={name} hue={hue} />

      <InputContainer>
        <Input
          type="range"
          $colour={`oklch(70% 0.1 ${hue})`}
          min="0"
          max="359"
          value={hue}
          onChange={(e) => onChange(e.target.value)}
        />
      </InputContainer>
    </Container>
  );
};

export default ColourShift;

GradientBar component

This is a sub-component of the ColourShift, showing the colour scale on the upper half of the ColourShift.

Note that the gradient needs an additional middle value between 0 and 359 to work properly.

import styled from "styled-components";

const Container = styled.div`
  background: linear-gradient(
    to right in oklch,
    oklch(65% 0.1 0),
    oklch(65% 0.1 179),
    oklch(65% 0.1 359)
  );
  width: 100%;
  padding: 3px 10px 6px;
  display: flex;
  justify-content: space-between;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;

  * {
    color: var(--color-whitish);
  }
`;

const TitleAndHue = styled.div`
  display: flex;
  gap: 6px;
`;

const Hue = styled.p`
  width: "30px";
`;

// ------------------------------------
type Props = {
  title: string;
  hue: string;
};

const GradientBar = ({ title, hue }: Props) => {
  return (
    <Container data-testid="GradientBar">
      <p>0</p>

      <TitleAndHue>
        <p>{title}:</p>
        <Hue>{hue}</Hue>
      </TitleAndHue>

      <p>359</p>
    </Container>
  );
};

export default GradientBar;

useCssGlobalVariables custom hook

This custom hook encapsulates the javascript required for reading and updating a CSS global variable.

const useCssGlobalVariables = (name: string) => {
  const getCssGlobalVariable = () => {
    const root = document.querySelector(":root");
    if (!root) return "";

    const style = getComputedStyle(root);
    return style.getPropertyValue(name);
  };

  // ------------------------------------
  const setCssGlobalVariable = (value: string) => {
    const root = document.querySelector(":root");
    if (!root) return null;

    (root as HTMLElement).style.setProperty(name, value);
  };

  // ------------------------------------
  return { getCssGlobalVariable, setCssGlobalVariable };
};

export default useCssGlobalVariables;

Demo

Click here ➤ Design page ➤ Colours tab

Firefox css: restyle the active tab handle

Ellis — Thu, 22 Feb 2024 11:05:13 +0000

On the Firefox browser, especially with some themes, the active (ie. currently selected) tab can be difficult to distinguish, because it may have a similar background colour to the other tabs.

One simple and direct solution is to modify the "userChrome.css" file manually, through the following steps.

(Some Firefox and CSS knowledge is assumed.)

On Firefox, go to the "about:config" page (by typing "about:config" in the url box), enter "toolkit.legacyUserProfileCustomizations.stylesheets" in the searchbox, and set the value to "true".
Again on Firefox, go to the "about:support" page, look for "Profile Folder", then open this folder.
Inside this folder, look for (or create) a "chrome" folder, and inside the "chrome" folder, look for (or create) a "userChrome.css" file.
Inside the "userChrome.css" file, carefully add the following lines at the top level. Add a border, or change the background if you prefer. Use crimson or your favourite colour. Try appending "!important" if it doesn't seem to work without it.

.tabbrowser-tab[selected="true"] .tab-background {
  /* background: crimson none !important; */
  border: 1px solid crimson;
  border-bottom: none;
}

Restart Firefox.

Flatten a json file: simple command line tool (Javascript)

Ellis — Fri, 27 Jan 2023 11:51:24 +0000

For a long time I needed a simple utility to flatten json files, (so that I could do a "grep" for "basket.fruits.?.apple." for instance), but I couldn't find one like I wanted. The issue is, json objects are multi-line, and locating specific nodes is difficult with single-line search tools like grep. (Yes, there are some ways and tools for doing that.)

As json objects are natively supported in Javascript (json = JavaScript Object Notation, after all), I wanted to try writing one with js, which turned out to be quite easy to implement. It also uses recursion.

How to run the script from command line:

$ node json_flatten.js a.json

Then you can easily filter the output with "grep" to include or exclude certain keys or values, for instance.

The input file "a.json":

{
  "basket": {
    "fruitCount": 2,
    "fruits": [
      {
        "apple": {
          "colour": "red",
          "weight": "100g"
        }
      },
      {
        "pear": {
          "colour": "green",
          "weight": "150g"
        }
      }
    ]
  },
  "totalValue": "123.45"
}

Output:

basket.fruitCount: 2
basket.fruits.0.apple.colour: red
basket.fruits.0.apple.weight: 100g
basket.fruits.1.pear.colour: green
basket.fruits.1.pear.weight: 150g
totalValue: 123.45

The script:

// Example call from command line:
// $ node json_flatten.js a.json
// ------------------------------------
// GLOBALS:
const keyArray = [];

// ------------------------------------
// READ JSON FROM FILE:
// Note: do not import the json file directly,
// because if the file includes any js code,
// that will be executed too, which is a security risk.
if (process.argv.length < 3) {
  console.log("*** Error: specify a json file");
  process.exit(1);
}
const filename = process.argv[2];

const fs = require("fs");
const file = fs.readFileSync(filename, "utf8");
var json = JSON.parse(file);

// ------------------------------------
const printObjectEntries = (entries) => {
  for (let entry of entries) {
    const [key, value] = entry;

    if (typeof value !== "object" || value === null) {
      const keysPrefix = keyArray.length ? keyArray.join(".") + "." : "";
      console.log(keysPrefix + key + ":", value);
    } else {
      printObject(key, value);
    }
  }
};

// ------------------------------------
const printObject = (key, value) => {
  const entries = Object.entries(value);

  !!key && keyArray.push(key);
  printObjectEntries(entries);
  !!key && keyArray.pop();
};

// ------------------------------------
// MAIN:
printObject("", json);

React "scroll" hook using new faster event

Ellis — Sat, 07 Jan 2023 18:37:14 +0000

Goal
We will create a React custom hook which will tell us whether we have scrolled beyond a certain vertical position or not.

This specific implementation returns a boolean value only: "whether our scrolling has exceeded a given y-value or not", because we want the hook to expose no more than the needed information.

I am currently using this to make my "page fixed header" taller to display more info, when the user scrolls past the first part of the page and this part disappears from sight.

Why this hook?
When we scroll from A to B, the currently used scroll detections (onscroll event) normally trigger multiple times, which can slow down the page.

Note
What is a "React custom hook"? One definition (or my definition) is:
-- if a function is named "use.." and calls at least one other React hook,
then it's a "React custom hook".

Document scrollend event is newly available on Firefox and Chrome. caniuse

First we will create a file "hooks/useScrollExceeds.ts"

import { useEffect } from "react";

const useScrollExceeds = (
  exceedY: number,
  setScrollExceeds: (exceeds: boolean) => void
) => {
  useEffect(() => {
    const callOnScrollEnd = (): void => {
      setScrollExceeds(window.pageYOffset >= exceedY);
    };

    document.addEventListener("scrollend", callOnScrollEnd);

    return () => {
      document.removeEventListener("scrollend", callOnScrollEnd);
    };
  }, []); // eslint-disable-line react-hooks/exhaustive-deps
};

export default useScrollExceeds;

Then in our own component file, for example Page.tsx

import { useScrollExceeds } from "../hooks";
...
const Page = () => {
  const [scrollExceeds, setScrollExceeds] = useState(false);

  useScrollExceeds(123, setScrollExceeds); // 123: y-value we want to check for

  const someFunction = () => {
    if (scrollExceeds) {
      // do something if we've scrolled more than 123 pixels vertically
  }
}

  // Or pass the information to some other component
  return (
...
  <Header scrollExceeds={scrollExceeds}>
...

React down slider (dynamic height)

Ellis — Sun, 28 Aug 2022 09:20:00 +0000

We will create a React "down slider" component. When we click a button, the slide content will appear/disappear (fully or partially) by sliding down/up. The slider will adjust to the content height using the triggers we specify. We can place the button inside or outside the slider content.

We will use: React, typescript, styled-components.
I used vite to create the app.

First we create a new component in DownSlider.tsx:

import React from "react";
import styled from "styled-components";

type DownSliderProps = {
  expanded: boolean;
  collapsedHeight: number;
  expandedHeight: number;
};

// height doesn't animate, but max-height does
const Container = styled.div<DownSliderProps>`
  position: relative;
  background-color: beige;
  overflow: hidden; // hide any overflowing content

  ${({ expanded, collapsedHeight, expandedHeight }) =>
    expanded
      ? `max-height: ${expandedHeight}px; transition: max-height 0.5s;`
      : `max-height: ${collapsedHeight}px; transition: max-height 0.5s;`}
`;

// ------------------------------------
// You can place the button inside or outside the content.
type Props = {
  expanded: boolean;
  collapsedHeight: number; // height of the button, if inside content
  expandedHeight: number; // height of expanded content
  children: React.ReactNode;
};

// ------------------------------------
const DownSlider = ({
  expanded,
  collapsedHeight,
  expandedHeight,
  children,
}: Props) => {
  return (
    <Container
      expanded={expanded}
      collapsedHeight={collapsedHeight}
      expandedHeight={expandedHeight}
    >
      {children}
    </Container>
  );
};

export default DownSlider;

Then in TestPage.tsx, we add the slider, a button, some content, and we simulate some delayed data access:

import React, { useEffect, useRef, useState } from "react";
import styled from "styled-components";

import { DownSliderButton, DownSlider, Page } from "components";

const DownSliderContainer = styled.div`
  width: 700px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid forestgreen;
`;

const SlideTitle = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #eee;
  font-weight: bold;
`;

const SlideContent = styled.div`
  padding: 10px;
`;

// ------------------------------------
const TestPage = () => {
  const ref: any = useRef(null); // to measure content height

  const initialHeight = 0; // 0: slides at start, ~1000: no sliding

  const [updatedHeight, setUpdatedHeight] = useState(initialHeight);
  const [isExpanded, setExpanded] = useState(true);
  const [delayedData, setDelayedData] = useState("");

  useEffect(() => {
    setUpdatedHeight(ref.current?.clientHeight);
  }, [ref.current?.clientHeight, delayedData]); // update triggers

  useEffect(() => {
    setTimeout(() => {
      setDelayedData("This data arrives ~2s later.");
    }, 2000);
  }, []);

  // ------------------------------------
  return (
    ...
      <DownSliderContainer>
        <SlideTitle>
          <div>Slide title</div>
          <DownSliderButton isExpanded={isExpanded} setExpanded={setExpanded} />
        </SlideTitle>

        <DownSlider
          expanded={isExpanded}
          collapsedHeight={0}
          expandedHeight={updatedHeight}
        >
          <SlideContent ref={ref}>
            <div>Slide content</div>

            <div>
              <img
                src={"/src/assets/cairn-terrier.jpg"}
                alt="dog"
                height={454}
              />
            </div>

            <div>More data arriving soon.</div>

            <div>{delayedData}</div>
          </SlideContent>
        </DownSlider>
      </DownSliderContainer>
    ...
  );
};

export default TestPage;

For completeness, here's DownSliderButton.tsx:

import React from "react";
import styled from "styled-components";

// @ts-ignore
import { Rotator } from "components";
// @ts-ignore
import { CircleArrowRightIcon } from "svg";

const Container = styled.div`
  cursor: pointer;
  color: var(--color-primary-lighter);

  & > div {
    width: 32px;
    height: 32px;
  }
`;

// ------------------------------------
type Props = {
  isExpanded: boolean;
  setExpanded: (isExpanded: boolean) => void;
};

// ------------------------------------
const DownSliderButton = ({ isExpanded, setExpanded }: Props) => {
  return (
    <Container role="button" onClick={() => setExpanded(!isExpanded)}>
      <Rotator rotated={isExpanded ? 90 : 180}>
        <CircleArrowRightIcon />
      </Rotator>
    </Container>
  );
};

export default DownSliderButton;

And the Rotator rotates anything you place inside it:

import styled, { css } from "styled-components";

type Props = {
  rotated?: number;
};

const Rotator = styled.div<Props>`
  transform: rotate(0deg);
  transition: transform 0.5s ease-out;

  ${({ rotated }) =>
    rotated !== undefined &&
    css`
      transform: rotate(${rotated}deg);
      transition: transform 0.5s ease-out;
    `};
`;

export default Rotator;

I declare this button component inside my "svg/index.js" file:

export { ReactComponent as CircleArrowRightIcon } from "svg/circle-arrow-right.svg";

.. and it imports this svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentcolor">
  <path d="M256 0C114.6 0 0 114.6 0 256c0 141.4 114.6 256 256 256s256-114.6 256-256C512 114.6 397.4 0 256 0zM406.6 278.6l-103.1 103.1c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25L306.8 288H128C110.3 288 96 273.7 96 256s14.31-32 32-32h178.8l-49.38-49.38c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l103.1 103.1C414.6 241.3 416 251.1 416 256C416 260.9 414.6 270.7 406.6 278.6z"/>
</svg>

Question/comments, let me know.

React & html canvas exercise: page background with triangles

Ellis — Wed, 03 Aug 2022 10:31:00 +0000

This is a React exercise to create a component which draws a background of little triangles like this:

With random shift, tilt right only:

No random shift, tilt right only:

With random shift, tilt right/left:

The exercise discovers how to:

draw triangles with html canvas element,
display the canvas in React,
and also create a 2 dimensional matrix utility object in js (js does not natively support 2 dimensional arrays as such).

React hooks used: useRef, useEffect.

We will also use: typescript & styled-components, which are both optional here.

Comments inside the code hopefully provide sufficient explanation.

From MDN Web Docs: In js, functions are objects, they can have properties and methods like any other object, except: functions can be called.

Step 1: Inside your React project, create a file "matrix.ts"

// ------------------------------------
// This provides a 2 dimensional array.
// Dimensions are x & y.
// Each cell is a string.
// It is implemented as a function object.
// Prototype functions: setValue, getValue.
// Example usage:
//   matrix = new Matrix();
//   matrix.setValue(3, 4, 1234);
//   const value = matrix.getValue(3, 4);
function Matrix() {
  this.getValue = (x: number, y: number): string => this[`${x}:${y}`];

  this.setValue = (x: number, y: number, value: string) => {
    this[`${x}:${y}`] = value;
  };
}

export default Matrix;

Step 2: Create a new component file "BackgroundWithTriangles.tsx"

/* eslint-disable @typescript-eslint/no-explicit-any */
import { useRef, useEffect } from "react";
import styled from "styled-components";

import Matrix from "../misc/matrix";

// SETTINGS:
// Canvas contains many squares, each square contains 2 triangles.
// l=logical, w=width, h=height.
const canvas_lw = 1000; // higher for less pixelation
const canvas_lh = 1000; // higher for less pixelation
const square_lw = 25;
const square_lh = 25;
const squareShift_lx = 4; // horizontal
const squareShift_ly = 4; // vertical
const tilt = 0.5; // 0=left, 0.5=equal, 1=right
const drawSquaresOnly = false;

// THESE THREE MUST ADD UP TO 256, FOR RGB:
const grayMinimum = 0; // higher for lighter.
const colourShift = 30; // 0 for full grayscale.
const grayShift = 256 - grayMinimum - colourShift; // 0+

const colourPalette = [
  "#628078",
  "#819993",
  "#4e6660",
  "#ff3a22",
  "#a1b7b1",
  "#c7af6b",
  "#a4893d",
  "#aaa",
  "#ccc",
  "#eeeeee",
  "#555555",
];

const useColourPalette = true;

// ------------------------------------
const Canvas = styled.canvas`
  position: fixed;
  top: 0;
  left: 0;
  width: calc(100vw + 50px); // 50px: compensate for the shifting at the end
  height: calc(100vh + 50px); // 50px: compensate for the shifting at the end
  opacity: 0.4; // if using a colour palette
`;

// ------------------------------------
// Output range: 0 .. maxIncl.
const getRandomInt = (maxIncl: number) =>
  Math.floor(Math.random() * (maxIncl + 1));

// Output range: -x/2 .. x/2
const getShiftPositiveOrNegative = (x: number) => getRandomInt(x) - x / 2;

// ------------------------------------
const getRandomGrayishRgb = () => {
  const randomGrayBase = grayMinimum + getRandomInt(grayShift);
  const r = randomGrayBase + getRandomInt(colourShift);
  const g = randomGrayBase + getRandomInt(colourShift);
  const b = randomGrayBase + getRandomInt(colourShift);
  return `rgb(${r},${g},${b})`;
};

// ------------------------------------
const getColour = () => {
  if (useColourPalette) {
    const index = getRandomInt(colourPalette.length - 1);
    return colourPalette[index];
  }

  return getRandomGrayishRgb();
};

// ------------------------------------
// "12:34" --> [12, 34]
const stringToArray = (value: string): number[] =>
  value.split(":").map((s: string) => Number(s));

// [12, 34] --> "12:34"
const arrayToString = (valueX: number, valueY: number): string =>
  `${valueX}:${valueY}`;

// ------------------------------------
const drawTriangle = (
  ctx: CanvasRenderingContext2D,
  x1: number,
  y1: number,
  x2: number,
  y2: number,
  x3: number,
  y3: number,
  fillStyle: string
) => {
  ctx.beginPath();
  ctx.lineWidth = 0;
  ctx.fillStyle = fillStyle;
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.lineTo(x3, y3);
  ctx.fill();
};

// ------------------------------------
const drawSquare = (
  ctx: CanvasRenderingContext2D,
  x1: number,
  y1: number,
  x2: number,
  y2: number,
  x3: number,
  y3: number,
  x4: number,
  y4: number,
  fillStyle: string
) => {
  ctx.beginPath();
  ctx.lineWidth = 0;
  ctx.fillStyle = fillStyle;
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.lineTo(x4, y4);
  ctx.lineTo(x3, y3);
  ctx.closePath();
  ctx.fill();
};

// ------------------------------------
// Two triangles forming a square.
const drawSquareOrTriangles = (
  ctx: CanvasRenderingContext2D,
  [x1, y1, x2, y2, x3, y3, x4, y4]: number[]
) => {
  if (drawSquaresOnly) {
    drawSquare(ctx, x1, y1, x2, y2, x3, y3, x4, y4, getColour());
    return;
  }

  // Draw two triangles
  if (Math.random() <= tilt) {
    // Tilt right, like: /
    drawTriangle(ctx, x1, y1, x2, y2, x3, y3, getColour());
    drawTriangle(ctx, x2, y2, x3, y3, x4, y4, getColour());
  } else {
    // Tilt left, like: \
    drawTriangle(ctx, x1, y1, x2, y2, x4, y4, getColour());
    drawTriangle(ctx, x1, y1, x3, y3, x4, y4, getColour());
  }
};

// ------------------------------------
// x, y: top left corner of the cell, which contain 1 square or 2 triangles.
const drawCell = (
  matrix: any,
  ctx: CanvasRenderingContext2D,
  x: number,
  y: number
) => {
  // 4 corners of the square
  const x1 = x;
  const y1 = y;
  const x2 = x;
  const y2 = y + square_lh;
  const x3 = x + square_lw;
  const y3 = y;
  const x4 = x + square_lw;
  const y4 = y + square_lh;

  drawSquareOrTriangles(ctx, [
    ...stringToArray(matrix.getValue(x1, y1)),
    ...stringToArray(matrix.getValue(x2, y2)),
    ...stringToArray(matrix.getValue(x3, y3)),
    ...stringToArray(matrix.getValue(x4, y4)),
  ]);
};

// ------------------------------------
const createMatrix = (ctx: CanvasRenderingContext2D) => {
  const matrix = new (Matrix as any)();

  // Create a matrix of dots for the squares, with shifts
  for (let x = 0; x <= canvas_lw; x += square_lw)
    for (let y = 0; y <= canvas_lh; y += square_lh) {
      const xWithShift = x + getShiftPositiveOrNegative(squareShift_lx);
      const yWithShift = y + getShiftPositiveOrNegative(squareShift_ly);
      matrix.setValue(x, y, arrayToString(xWithShift, yWithShift));
    }

  // Draw the squares (we need 4 dots for each square)
  for (let x = 0; x <= canvas_lw - square_lw; x += square_lw)
    for (let y = 0; y <= canvas_lh - square_lh; y += square_lh) {
      drawCell(matrix, ctx, x, y);
    }
};

// ------------------------------------
// COMPONENT:
// Draws a window background of squares.
// Each square draws 2 triangles.
// Each triangle has random shifts in: corner positions, and colour.
const BackgroundWithTriangles = () => {
  const ref = useRef<HTMLCanvasElement>(null);

  // ------------------------------------
  useEffect(() => {
    if (ref && ref.current) {
      const canvas: HTMLCanvasElement = ref.current;
      const ctx = canvas.getContext("2d");

      ctx && createMatrix(ctx);
    }
  }, []);

  // ------------------------------------
  // Width and height: logical (int), not physical (px).
  return <Canvas ref={ref} width={canvas_lw} height={canvas_lh} />;
};

export default BackgroundWithTriangles;

Step 3: Inside any component, probably a page, as in the following example, use the new component

import { BackgroundWithTriangles } from "components";

const Content = styled.div`
  z-index: 1;
  background-color: #f0f0f0;
`;

return (
  <Page>
    <BackgroundWithTriangles />

    <Content>Home page</Content>
...

Any question or suggestions are welcome.

React wrapper component: Scroller

Ellis — Sat, 02 Jul 2022 19:12:00 +0000

The goal
To create a React component which will make any given component vertically or horizontally scrollable using the mouse wheel, so that we don't need to change the component to make it scrollable. In this example, we will make a data table scrollable: the table contents will scroll up or down when we roll the mouse wheel.

The Scrollable component will be visible as the orange-brown around the table, and the table inside will become scrollable (see the image above). Inside the scroller, the mouse cursor will change to an up/down arrow (⇳) or a right/left arrow (⬄) depending on the scroll direction.

The components and the calls

FILE 1 - useScroll.ts
A new React custom hook for adding a "wheel" event listener to the "ref" of the scroll box. (The event listener is automatically removed in the end, to avoid a memory leak.) The event will call the provided "onScroll" function with "up" or "down" as parameter.

import { useEffect } from "react";

const useScroll = (
  ref: React.RefObject<HTMLElement>,
  onScroll: (direction: "up" | "down") => void
) => {
  const callOnScroll = (event: Event): void => {
    event.preventDefault(); // prevent background scroll

    // @ts-expect-error xxx
    const wheelEvent = event as React.WheelEvent<HTMLElement>;

    onScroll(wheelEvent.deltaY > 0 ? "up" : "down");
  };

  // ------------------------------------
  useEffect(() => {
    if (!ref) return;

    const current = ref.current;

    if (current) {
      current?.addEventListener("wheel", callOnScroll);
    }

    return () => {
      current?.removeEventListener("wheel", callOnScroll);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [ref, ref?.current, onScroll]);
};

export default useScroll;

FILE 2 - Scroller.tsx
Our new React "wrapper" React component consists of a "div" wrapping the given children. We create a "ref" for it so a "wheel" event can be attached to it, for calling the provided "onScroll" function. To the right of (or under) the children we also insert a ScrollIndicator component to show the scroll progress. We also change the cursor inside the div to show we have entered the scrollable area.

import { ReactNode, useRef } from "react";
import styled from "styled-components";

import { useScroll } from "../hooks";
import { ScrollIndicator } from ".";

type ContainerProps = {
  $isHorizontal: boolean;
};

const Container = styled.div<ContainerProps>`
  border: 2px solid var(--color-secondary);
  border-radius: 6px;
  padding: 4px;
  cursor: ${({ $isHorizontal }) => ($isHorizontal ? "ew-resize" : "ns-resize")};

  display: flex;
  flex-direction: ${({ $isHorizontal }) => ($isHorizontal ? "column" : "row")};
  gap: 4px;
`;

// ------------------------------------
type Props = {
  pageOffset: number;
  pageSize: number;
  itemCount: number;
  step: number;
  isHorizontal?: boolean;
  setPageOffset: (pageOffset: number) => void;
  children: ReactNode;
};

// ------------------------------------
const Scroller = ({
  pageOffset,
  pageSize,
  itemCount,
  step,
  isHorizontal = false,
  setPageOffset,
  children,
}: Props) => {
  const refBoxWithScroll = useRef(null);

  // ------------------------------------
  const onScroll = (direction: "up" | "down") => {
    if (direction === "up" && pageOffset < itemCount - pageSize) {
      setPageOffset(pageOffset + step);
    } else if (direction === "down" && pageOffset > 0) {
      setPageOffset(pageOffset - step);
    }
  };

  // ------------------------------------
  useScroll(refBoxWithScroll, onScroll);

  // ------------------------------------
  return (
    <Container
      data-testid="Scroller"
      ref={refBoxWithScroll}
      $isHorizontal={isHorizontal}
    >
      {children}

      <ScrollIndicator
        pageOffset={pageOffset}
        pageSize={pageSize}
        itemCount={itemCount}
        isHorizontal={isHorizontal}
      />
    </Container>
  );
};

export default Scroller;

FILE 3 - ScrollIndicator.tsx
This React component displays an orange-brown bar inside a gray bar (vertical or horizontal), showing the scroll progress. At this moment it is passive, and does not react to any mouse drag events. Many different html/css ways are possible to implement this visual, but I have chosen the one here, as i've found it simple, safe and it works. One useful trick here is to use "%" values, so we don't have to calculate any "px" values.

import styled from "styled-components";

type ContainerProps = {
  $isHorizontal: boolean;
};

const Container = styled.div<ContainerProps>`
  background-color: var(--color-gray-lighter);
  border-radius: 3px;
  display: flex;
  flex-direction: ${({ $isHorizontal }) => ($isHorizontal ? "row" : "column")};
`;

type BarProps = {
  $isHorizontal: boolean;
  $length: number;
  $isColoured?: boolean;
};

const Bar = styled.div<BarProps>`
  border-radius: 3px;

  ${({ $isHorizontal }) => ($isHorizontal ? "height" : "width")}: 10px;

  ${({ $isHorizontal, $length }) =>
    ($isHorizontal ? "width" : "height") + `: ${$length}%`};

  ${({ $isColoured }) =>
    $isColoured && "background-color: var(--color-secondary);"}
`;

// ------------------------------------
type Props = {
  pageOffset: number;
  pageSize: number;
  itemCount: number;
  isHorizontal: boolean;
};

const ScrollIndicator = ({
  pageOffset,
  pageSize,
  itemCount,
  isHorizontal,
}: Props) => {
  if (itemCount <= pageSize) return null; // 1 page, no scroll

  // All length values are percentages:
  const bar1Length = (pageOffset / itemCount) * 100;
  const minLength = 1;
  const bar2Length = Math.max(minLength, (pageSize / itemCount) * 100);

  return (
    <Container data-testid="ScrollIndicator" $isHorizontal={isHorizontal}>
      <Bar $isHorizontal={isHorizontal} $length={bar1Length} />

      <Bar $isHorizontal={isHorizontal} $length={bar2Length} $isColoured />
    </Container>
  );
};

export default ScrollIndicator;

FILE 4 - DemoComponent.tsx
In this demo component, we wrap a table component inside the Scroller. When the cursor is inside the Scroller, moving the mouse wheel will call the given onScroll function. The onScroll function will increment or decrement an "offset" state variable. The table displays 10 transaction rows (for the given transaction indexes), starting from this "offset", so the table will be scrolling.

import { useState } from "react";

import { Scroller, SelectedFieldTable } from "../components";

const pageSize = 10;

// ------------------------------------
type Props = {
  transactionIndexes: number[];
};

const DemoComponent = ({ transactionIndexes }: Props) => {
  const [offset, setOffset] = useState(0);

  // ------------------------------------
  const transactionIndexesSlice = transactionIndexes.slice(
    offset,
    offset + pageSize
  );

  // ------------------------------------
  return (
    <Scroller
      pageOffset={offset}
      pageSize={pageSize}
      itemCount={transactionIndexes.length}
      step={1}
      setPageOffset={setOffset}
    >
      <SelectedFieldTable transactionIndexes={transactionIndexesSlice} />
    </Scroller>
  );
};

export default DemoComponent;

By the way, I also use this same ScrollIndicator component inside a Paging component somewhere else, to indicate the paging progress. The Paging component consists of: a horizontal ScrollIndicator, 4 buttons, and the page index & count. Paging code and visuals as follows:

<div data-testid="Paging">
      <ScrollIndicator
        pageOffset={pageIndex * pageSize}
        pageSize={pageSize}
        itemCount={itemCount}
        isHorizontal
      />
...

Corrections/suggestions are welcome.

React component for Bank Nue Font text

Ellis — Wed, 18 May 2022 16:52:00 +0000

What: A fun little component to showcase the Bank Nue Font, which has been designed as a multi-colour display font, especially for bigger sizes. The component displays a given text as in the picture above, by superposing two styles.

The Bank Nue Font page says: This font comes in two styles, which can be combined and layered to create a dynamic and striking appearance.

Using: React, typescript, and styled-components.

In your React app, create (or add to) the files as follows:

STEP 1. From the Bank Nue Font page given above, download the following files into "src/fonts" folder:

banknue-lined-webfont.woff
banknue-lined-webfont.woff2
banknue-sectioned-webfont.woff
banknue-sectioned-webfont.woff2

STEP 2. Add to "src/index.css":

@font-face {
  font-family: 'banknuelined';
  src: url('./fonts/banknue-lined-webfont.woff2') format('woff2'),
       url('./fonts/banknue-lined-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'banknuesectioned';
  src: url('./fonts/banknue-sectioned-webfont.woff2') format('woff2'),
       url('./fonts/banknue-sectioned-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

STEP 3. Our new component "src/components/BankNueFontText.tsx":

import styled from "styled-components";

type StyleProps = {
  size: 1 | 2 | 3 | 4 | 5 | 6;
};

const Container = styled.div<StyleProps>`
  position: relative;
  font-size: ${({ size }) => size * 30}px;
`;

const Stripes = styled.div`
  font-family: banknuelined;
`;

const Shadow = styled.div`
  position: absolute;
  font-family: banknuesectioned;
  mix-blend-mode: multiply;
  /* mix-blend-mode: luminosity; */
`;

const ShadowBlue = styled(Shadow)<StyleProps>`
  color: #00cef1;
  top: ${({ size }) => size}px;
`;

const ShadowRed = styled(Shadow)<StyleProps>`
  color: #fa0007;
  top: ${({ size }) => size * 2}px;
  left: -${({ size }) => size}px;
`;

type Props = {
  size?: 1 | 2 | 3 | 4 | 5 | 6;
  text: string;
};

// See: https://dafontfile.com/bank-nue-font/
const BankNueFontText = ({ size = 3, text }: Props) => {
  return (
    <Container size={size}>
      <Stripes>{text}</Stripes>
      <ShadowBlue size={size}>{text}</ShadowBlue>
      <ShadowRed size={size}>{text}</ShadowRed>
    </Container>
  );
};

export default BankNueFontText;

STEP 4. In any of your components or pages, add:

const text = "bank";
...
return (
...
  <BankNueFontText size={4} text={text} />
...);

Suggestions/questions are welcome.

React modal with "div"

Ellis — Thu, 14 Apr 2022 15:35:00 +0000

The goal

Create a React modal dialog box using the html "div" element. Content is being provided as children. (Compare to: React modal using an html "dialog")

Notes

This "Modal" component is generic: the modal content is contained inside the parent container, the modal only wraps it.
In general I strongly suggest you create a modal conditionally like here (see: isModalOpen && below), instead of creating it always but displaying it conditionally. I have seen websites with a large number of modals on their main page, where each modal content was heavy using a significant amount of cpu and memory; on a typical session only a couple of these modals were opened, though the page totally unnecessarily created all of them every time and ended up being very large and slow.

Component 1 - the "ModalTester" contains and opens the modal

import { useState } from "react";
import styled from "styled-components";

import { Modal } from ".";

const SomeContentForTheModal = styled.div`
  height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
`;

// ------------------------------------
const ModalTester = () => {
  const [isModalOpen, setModalOpen] = useState(false);

  return (
    <div data-testid="ModalTester">
      <button onClick={() => setModalOpen(true)}>Open the modal</button>

      {isModalOpen && (
        <Modal
          title="Modal example"
          proceedButtonText="Proceed"
          onProceed={() => console.log("Proceed clicked")}
          onClose={() => setModalOpen(false)}
        >
          <SomeContentForTheModal>
            <p>This is the modal content.</p>

            <p>To close: click Cancel, press Escape, or click outside.</p>
          </SomeContentForTheModal>
        </Modal>
      )}
    </div>
  );
};

export default ModalTester;

Component 2 - the "Modal" component itself

import { ReactNode } from "react";
import styled from "styled-components";

import { Button } from "../components";
import { useKeyDown } from "../hooks";

const Overlay = styled.div`
  z-index: 101;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
`;

const Container = styled.div`
  z-index: 102;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 8px;
  padding: 0;
  background-color: var(--color-whitish);
`;

const TopSection = styled.div`
  position: relative;
  padding: 0 20px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--color-gray-lighter);
  border-radius: 8px 8px 0 0;
`;

const MiddleSection = styled.div`
  position: relative;
  padding: 0 20px;
`;

const BottomSection = styled(TopSection)`
  border-radius: 0 0 8px 8px;
`;

const FlexSpace = styled.div`
  flex-grow: 1;
`;

// ------------------------------------
type Props = {
  title: string;
  proceedButtonText?: string;
  closeButtonText?: string;
  onProceed?: () => void;
  onClose: () => void;
  children: ReactNode;
};

// ------------------------------------
const Modal = ({
  title,
  proceedButtonText,
  closeButtonText,
  onProceed,
  onClose,
  children,
}: Props) => {
  useKeyDown("Escape", onClose);

  const proceedAndClose = () => {
    onProceed?.();
    onClose();
  };

  // Prevents closing when we click inside the modal
  const preventAutoClose = (e: React.MouseEvent) => e.stopPropagation();

  // ------------------------------------
  return (
    <Overlay onClick={onClose}>
      <Container onClick={preventAutoClose}>
        <TopSection>
          <h3>{title}</h3>
        </TopSection>

        <MiddleSection>{children}</MiddleSection>

        <BottomSection>
          {!!proceedButtonText && (
            <Button text={proceedButtonText} onClick={proceedAndClose} />
          )}

          <FlexSpace />

          <Button text={closeButtonText || "Cancel"} onClick={onClose} />
        </BottomSection>
      </Container>
    </Overlay>
  );
};

export default Modal;

Additionally a useKeyDown() hook closes the modal if the Escape gets pressed

import { useEffect } from "react";

const useKeyDown = (key: string, onKeyDown: () => void) => {
  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === key) onKeyDown();
    };

    window.addEventListener("keydown", handleKeyDown);

    return () => {
      window.removeEventListener("keydown", handleKeyDown);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
};

export default useKeyDown;

My recommendation

Personally I clearly prefer this React modal here which uses the html "div", and not the one using the new html "dialog" element. I think:

a modal implemented using a "div" is: simpler, more intuitive, safer, and easier to maintain/troubleshoot,
the new html "dialog" element is unnecessarily complicated.

Thanks for reading. Suggestions/corrections are welcome.

React modal with "dialog"

Ellis — Tue, 22 Mar 2022 12:59:00 +0000

The goal:

Create a React modal dialog box using the new html "dialog" element. Content provided as children. (Compare to: React modal using an html "div"
Is it possible fully declaratively, without any javascript calls?
Is it better than the usual declarative implementation using React and div's?

w3schools.com says: the "dialog" element makes it easy to create popup dialogs and modals on a web page.

Support: all major browsers.

Notes:

The "Modal" component is generic, it shows content from the parent container, provided as children.
onCancel() is necessary for resetting the state variable "open" when Escape is pressed.
preventAutoClose() prevents closing when we click inside the modal dialog box.

I've created two components:

First, the "DialogModalTester" component contains and opens the modal:

import { useState } from "react";

import DialogModal from "./DialogModal";

const DialogModalTester = () => {
  const [isOpened, setIsOpened] = useState(false);

  const onProceed = () => {
    console.log("Proceed clicked");
  };

  return (
    <div>
      <button onClick={() => setIsOpened(true)}>Open "dialog" modal</button>

      <DialogModal
        title="Dialog modal example"
        isOpened={isOpened}
        onProceed={onProceed}
        onClose={() => setIsOpened(false)}
      >
        <p>To close: click Close, press Escape, or click outside.</p>
      </DialogModal>
    </div>
  );
};

export default DialogModalTester;

Secondly, the "DialogModal" component itself:

import { MouseEvent, useEffect, useRef } from "react";
import styled from "styled-components";

const Container = styled.dialog`
  width: 400px;
  border-radius: 8px;
  border: 1px solid #888;

  ::backdrop {
    background: rgba(0, 0, 0, 0.3);
  }
`;

const Buttons = styled.div`
  display: flex;
  gap: 20px;
`;

const isClickInsideRectangle = (e: MouseEvent, element: HTMLElement) => {
  const r = element.getBoundingClientRect();

  return (
    e.clientX > r.left &&
    e.clientX < r.right &&
    e.clientY > r.top &&
    e.clientY < r.bottom
  );
};

type Props = {
  title: string;
  isOpened: boolean;
  onProceed: () => void;
  onClose: () => void;
  children: React.ReactNode;
};

const DialogModal = ({
  title,
  isOpened,
  onProceed,
  onClose,
  children,
}: Props) => {
  const ref = useRef<HTMLDialogElement>(null);

  useEffect(() => {
    if (isOpened) {
      ref.current?.showModal();
      document.body.classList.add("modal-open"); // prevent bg scroll
    } else {
      ref.current?.close();
      document.body.classList.remove("modal-open");
    }
  }, [isOpened]);

  const proceedAndClose = () => {
    onProceed();
    onClose();
  };

  return (
    <Container
      ref={ref}
      onCancel={onClose}
      onClick={(e) =>
        ref.current && !isClickInsideRectangle(e, ref.current) && onClose()
      }
    >
      <h3>{title}</h3>

      {children}

      <Buttons>
        <button onClick={proceedAndClose}>Proceed</button>
        <button onClick={onClose}>Close</button>
      </Buttons>
    </Container>
  );
};

export default DialogModal;

As a nice-to-have, add the following class to your global css to prevent the body from scrolling when the modal is open. In browser developer tools you can observe this class actually being added and removed.

body.modal-open {
  overflow: hidden; /* see "modal-open" in Modal.tsx */
}

Conclusion:

Is it better than the typical declarative implementation using React and div's? KIND OF YES, this seems simpler and shorter, though the need for javascript calls makes it still not too simple with React. One feels it should have been simpler.
Is it possible fully declaratively, without javascript calls? NO, unfortunately we need useRef and javascript calls if we want a modal dialog with a backdrop and not to close itself on click inside the dialog. If we have to write javascript to make an HTML element usable, I think that points at a design flaw.

My recommendation

Personally I clearly prefer React modal using an html "div", and not this one here using the new html "dialog" element. I think:

a modal implemented using a "div" is: simpler, more intuitive, safer, and easier to maintain/troubleshoot,
the new html "dialog" element is not very intuitive or well designed, and it is unnecessarily complicated.

Thanks for reading. Suggestions/corrections are welcome.