A Tailwind snippet to emulate .stretched-link from Bootstrap

<a class="before:absolute before:inset-0 before:z-0 before:overflow-hidden before:whitespace-nowrap before:indent-[100] before:content-['']">
  link
</a>

Note:

• Make sure the parent element has position relative class
• Make sure the z-index value of the other nested links are bigger than 0

Analogy of how OAuth works:

At a high level, the process is similar to sending a child home from school with a permission slip to go on a field trip. The teacher asks students if they want to go on a field trip. If they say yes, she sends them home with a paper for their parents to sign. Their parents then sign the permission slip and send the child back to school with it. Once the teacher receives the signed permission slip, the child can be taken on the field trip.

Quickly write to a file through command line:

• Replace whole file

  echo "Hello world" | cat > hello.txt

• Append to end of file

  echo "Hello world" | cat >> hello.txt

A CSS snippet to handle nested border radius:

.parent {
  --nested-radius: calc(var(--radius) - var(--padding));
}

.nested {
  border-radius: var(--nested-radius);
}

Heuristics for optimizing React’s performance:

1. If you can solve the problem by altering component hierarchy or state, prioritize that!
2. Memoization is a solid strategy only if the cost of checking pays for itself with the time you save rendering.
3. Use Lazy/Suspense API to progressively load components.
4. Use the Transition API (useTransition / useDeferredValue) when you’re really in a pickle (e.g something is computationally expensive, but not running it is not a choice).

Use console.dir() to print nested object.

const obj = {
  a: "a",
  b: {
    c: "c",
    d: {
      e: "e",
      f: {
        g: "g",
        h: {
          i: "i",
        },
      },
    },
  },
};

console.log(obj);
// { a: 'a', b: { c: 'c', d: { e: 'e', f: [Object] } } }

console.dir(obj, { depth: null }); // `depth: null` ensures unlimited recursion
// {
//   a: 'a',
//   b: {
//     c: 'c',
//     d: { e: 'e', f: { g: 'g', h: { i: 'i' } } }
//   }
// }

Using Array from() and keys() methods of ES6, we can create array from 0 to n like this:

Array.from(Array(10).keys());
//=> [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

or

[...Array(10).keys()];
//=> [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

To create an array starting from 1:

Array.from({ length: 10 }, (_, i) => i + 1);
//=> [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

When to use Object VS Map in Javascript:

Use Object for records where you have a fixed and finite number of properties/fields known at author time, such as a config object or anything that is for one-time use in general.

Use Map for dictionaries or hash maps where you have a variable number of entries, with frequent updates, whose keys might not be known at author time, such as an event emitter.

According to benchmarks, unless the keys are strings of small integers, Map is indeed more performant than Object on insertion, deletion and iteration speed, and it consumes less memory than an Object of the same size.

Node tips: __dirname will resolve to the directory the executing script resides in. So if your script resides in /home/sites/app.js, __dirname will resolve to /home/sites.

The accessibility inspector in Firefox exposes Gecko’s accessibility tree rather than information from the platform accessibility layer.

An example of the result of this is role="button" showing up as role="pushbutton" instead.

To check how the internal roles are mapped to platform roles, look at the source of truth.