Feel free to tweak the two custom properties in the css pane to explore the different mosaic patterns that are generated.

Single HTML element + CSS only

1. Inhale for 4 seconds
2. Hold for 4 seconds
3. Exhale for 4 seconds
4. Hold for 4 seconds

And repeat

Inspired by: https://quietkit.com/box-breathing/

Note: The current Safari version has a bugged linear() implementation that has been fixed in the upcoming version.

Shows a great example of JS' new using keyword (similar to defer in D, Go, Swift, etc...)

Comments should provide context, not repeat what the code already says. The Redis codebase has 9 distinct types of comments (Function, Design, Why, Teacher, Checklist, Guide, Trivial, Debt, Backup), each with a specific goal in mind.

Answer: create a new object with the properties of the two original objects using the spread operator.

The order you insert the objects into the new merged object determines which object's properties take priority over the other.

Linked example:

const obj1 = { foo: "bar", x: 42 };
const obj2 = { foo: "baz", y: 13 };

const clonedObj = { ...obj1 };
// { foo: "bar", x: 42 }

const mergedObj = { ...obj1, ...obj2 };
// { foo: "baz", x: 42, y: 13 }

You can find more discussion here: https://stackoverflow.com/questions/171251/how-can-i-merge-properties-of-two-javascript-objects-dynamically

The mistake most devs make when trying to document their project is that they only make one (maybe two) types of documentation based on a readme template and/or what their mental model of a newcomer needs.

Devs need to be actively taught that:

1. Good documentation isn't one thing, it's four. To have good documentation, you need all four distinct types of documentation.
2. What the four types of documentation are (this is discussed in the link)

If you don't have all four types of documentation, you have bad documentation.