ZouYouShun

import {
  filter,
  firstValueFrom,
  fromEvent,
  map,
  merge,
  share,
  tap,
  timer,
} from 'rxjs';

ZouYouShun

// eslint-disable-next-line @typescript-eslint/ban-types
export type NotFunction<T> = T extends Function ? never : T;

ZouYouShun

Animation around target

make a box move arround target circular box https://play.tailwindcss.com/opZjZfn3o6?file=css

reference: https://www.youtube.com/watch?v=azoIMhKOucQ

<main class="h-screen w-screen grid place-content-center">

ZouYouShun

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Element

Box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
• elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
• elem.getClientRects(), elem.getBoundingClientRect()