Zubashev Stepan's blog

Never write code like:

new IntersectionObserver((entries) => {
  const entry = entries[0];

… even if you only care about a single node. Why? Because, it turned out, sometimes browsers queue multiple events (for the same DOM node) and invoke the callback with multiple entries. Only the last item has a non-stale data inside. So the correct approach is:

new IntersectionObserver((entries) => {
  const entry = entries.at(-1);

Because it’s too tightly bound to a mobile device. It seems I’ve lost access to one of my email accounts for an indefinite amount of time. I’ll skip the name of the service, it’s not very important. Today I tried to log in and failed because of their 2FA.

• Their mobile app somehow lost my account. That sucks.
• I still know the password, I can’t log in without going through a recovery process.
• Their recovery process requires access to my old SIM card.
• Luckily I have it and got the SMS
• Then it asked for a PIN. I don’t have one. I assume they introduced PINs after I set up my 2FA account. Fine, I can skip this step.
• Next, I had to answer a default security question like “What’s the name of the street …”. I know the answer, but I don’t know whether it’s case-sensitive.
• Anyway,The system refuses to accept any of my attempts.
• Now I have to go through a long process of convincing their security team that it’s actually me.
• I’m not sure it’ll work out. I hope as the last hope I’ll be able to send them my passport data

So, why do I hate 2FA? Because it’s supposed to be a security measure. But instead it’s almost always a suffering measure.

React documentation says:

Now that your component’s code loads on demand, you also need to specify what should be displayed while it is loading. You can do this by wrapping the lazy component or any of its parents into a boundary

• Lazy - React

“Need to”? Or “must to”?

If you try to use lazy without <Suspense/> it… It works. Wow. So, is it optional?

HELL NO! You must wrap your lazy components with <Suspense/>.

Why? Because such non-connected components can put React’s reconciliation engine into a semi-broken, hung state where behavior becomes unpredictable. It gets auto-healed only when the lazy promise is fulfilled.

So, if you don’t want to play hide & seek in a mine field — do it. Wrap it with <Suspense/> even if you don’t plan to render any fallback JSX.

TIL: HTML partially supports math:

<math>
  <mrow>
    <mi>a</mi>
    <mo>=</mo>
    <mfrac>
      <mrow>
        <mo>-</mo>
        <mi>b</mi>
        <mo>±</mo>
        <msqrt>
          <msup><mi>b</mi><mn>2</mn></msup>
          <mo>-</mo>
          <mn>4</mn><mi>a</mi><mi>c</mi>
        </msqrt>
      </mrow>
      <mrow><mn>2</mn><mi>a</mi></mrow>
    </mfrac>
  </mrow>
</math>

^ It’s a valid HTML code. It renders this way:

No 3rd party libs needed.

type Fn = <T>(a: T) => T;
declare const fn: Fn;

const a = fn<number>; // no "()"
a; // const a: (a: number) => number

It was on the surface all along, but it eluded me.