You code you learn

//custom.d.ts


declare module "html-table-to-json" {

  export default class HtmlTableToJson {

    constructor(html: string);

    static parse(html: string): {
        _results: Record<string, string>[];
        _headers: string[];
        _count: null;
        _firstRowUsedAsHeaders: boolean;
    };

    getResults(): any;

  }

}

• a short cut :keybindings.json

  {
    "key": "ctrl+o",
    "command": "editor.action.sourceAction",
    "args": {
      "kind": "source.addMissingImports",
      "apply": "first"
    }
  },

• automatically on save : settings.json

  "editor.codeActionsOnSave": { "source.addMissingImports": "always" },

      <div className="grid w-full items-center justify-center">
        <div className="col-start-1 row-start-1">
          <img
            height={200}
            width={200}
            src={"https://picsum.photos/id/62/200/200"}
            className="object-cover"
          />
        </div>
      <div className="col-start-1 row-start-1 text-center font-bold text-2xl">Text on image</div>
      </div>

const error = mutation?.error as ClientResponseError;
const pbError = error?.data?.data as Record<string, {message: string,code:string}>

useEffect(() => {
    pbError&&Object?.entries(pbError)?.forEach(([key, value]) => {
      form.setFieldMeta(key as any,(prev)=>{
        return {...prev, errorMap:{
          onChange:value?.message
        }}
      });
    });
}, [pbError]);

Copied from a tanstack form discussion 👇

import { create } from "zustand";

interface OneBear {
  age: number;
  type: "black" | "brown" | "black";
}
interface BearState {
  bears: OneBear[];
  // just takes in the new value
  setBear: (value: OneBear) => void;
  // takes in a function that will give you access to the previous state
  setBearFunctionally: (value: (prev: OneBear[]) => OneBear) => void;
  // takes in a function that will give you access to the previous state or just a plaain value
  setBearvalueOrFunctionally: (value: (prev: OneBear[]) => OneBear | OneBear) => void;
}

const useBearStore = create<BearState>()((set) => ({
  bears: [],
  setBear: (value) => set((state) => ({ bears: [...state.bears, value] })),
  setBearFunctionally: (value) => {
    set((state) => {
      return { bears: [...state.bears, value(state.bears)] };
    });
  },
  setBearvalueOrFunctionally: (value) => {
    set((state) => {
      return { bears: [...state.bears, typeof value === "function" ? value(state.bears) : value] };
    });
  },
}));

transition: all 0.3s ease;

but we can take this further by using the newly added view transitions

/* Angled */
[data-style="angled"]::view-transition-old(root) {
  animation: none;
  z-index: -1;
}

[data-style="angled"]::view-transition-new(root) {
  animation: unclip 1s;
  clip-path: polygon(-100vmax 100%, 100% 100%, 100% -100vmax);
}

@keyframes unclip {
  0% {
    clip-path: polygon(100% 100%, 100% 100%, 100% 100%);
  }
}

and trigger the animations using the view transitions

  function transitionColors() {
    if (typeof window !== "undefined") {
      try {
        document.startViewTransition(() => {
          const newTheme = theme === "light" ? "dark" : "light";
          document.documentElement.dataset.theme = newTheme;
          updateTheme(newTheme);
        });
      } catch (error) {
        const newTheme = theme === "light" ? "dark" : "light";
        document.documentElement.dataset.theme = newTheme;
        updateTheme(newTheme);
      }
    }
  }

📝 Note
Remember to add the data-theme and data-style attribute in the html element to make the changes visible

  type Join<K, P> = K extends string | number
  ? P extends string | number
    ? `${K}${"" extends P ? "" : "."}${P}`
    : never
  : never;

// recurse to depth (neede to avoid infinite recursion) 
type Prev = [
  never,
  0,
  1,
  2,
  3,
  4,
  5,
...0[],
];

// type will reursivly join keys into a union
export type PossibleNestedUnions<T, D extends number = 10> = [D] extends [never]
  ? never
  : T extends object
    ? {
        [K in keyof T]-?: K extends string | number
          ? `${K}` | (D extends 0 ? never : Join<K, PossibleNestedUnions<T[K], Prev[D]>>)
          : never;
      }[keyof T]
    : "";

// Example usage:
type ExampleType = {
  a: string;
  b: {
    c: number;
    d: {
      e: boolean;
      f: {
        g: string;
      };
    };
  };
  h: Date;
};

type NestedKeys1 = NestedUnionsToDepth<ExampleType, 1>; // "a" | "b" | "h"
type NestedKeys2 = NestedUnionsToDepth<ExampleType, 2>; // "a" | "b" | "b.c" | "b.d" | "h"
type NestedKeys3 = NestedUnionsToDepth<ExampleType, 3>; // "a" | "b" | "b.c" | "b.d" | "b.d.e" | "b.d.f" | "h"
type NestedKeysAll = NestedUnionsToDepth<ExampleType, 10>; // All nested