Today I learned...

export type LightTypes = {
  feDistantLight: FeDistantLightAttributes;
  fePointLight: FePointLightAttributes;
  feSpotLight: FeSpotLightAttributes;
};

export type FeDiffuseLightingAttributes = {
	in?: inType;
	diffuseConstant?: number;
	surfaceScale?: number;
	"lighting-color"?: string;
	result?: string;
};

export type FeDistantLightAttributes = {
	azimuth?: number;
	elevation?: number;
};

  feDiffuseLightingWithLight<K extends keyof LightTypes>(attrs: FeDiffuseLightingAttributes, type: K, lightAttrs: LightTypes[K]) {
    let elem = this.addElement("feDiffuseLighting", attrs) as SVGFilterElement;

    this.addElement(type, lightAttrs, elem);
    return this;
  }

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Install dependencies and start dev",
      "type": "shell",
      "command": "ni && d",
      "runOptions": { "runOn": "folderOpen" },
      "group": {
        "kind": "none",
        "isDefault": true
      },
      "presentation": {
        "reveal": "always",
        "panel": "shared"
      }
    },
  ]
}

  {
    "key": "f8",
    "command": "runCommands",
    "args": {
      "commands": [
        {
          "command": "workbench.action.tasks.terminate",
          "args": "terminateAll"
        },
        {
          "command": "workbench.action.tasks.runTask",
          "args": "Install dependencies and start dev"
        }
      ]
    }
  }

const patternSelector = document.querySelector<HTMLButtonElement>("#nejime button")!;
patternSelector.focus();

const patternSelector = document.querySelector<HTMLButtonElement>("#nejime button")!;
queueMicrotask(() => {
  patternSelector.focus();
});

<div class="has-[button:active]:bg-red-500 has-[p:hover]:bg-pink-500">
  <button>I'm active</button>
  <p>more text</p>
</div>

// Load function
const stringifiedImage = JSON.stringify(Array.from(new Uint8Array(image)));

return {
  stringifiedImage
}

// +page.svelte

export let data;
const parsedImage = JSON.parse(data.stringifiedImage);

const { container } = render(Layout, {
  props: {
    data,
  },
});

theme: {
    animation: {
      keyframes: {
        "in-out-custom":
          "{from,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215,0.61,0.355,1)}0%{opacity:0;transform:translate3d(0,-1500px,0)}60%{opacity:1;transform:translate3d(0,25px,0)}75%{transform:translate3d(0,-10px,0)}90%{transform:translate3d(0,5px,0)}to{transform:translate3d(0,0,0)}}",
      },
      durations: {
        "in-out-custom": "1s",
      },
      timingFns: {
        "in-out-custom": "ease-in-out",
      },
      counts: {
        "in-out-custom": "infinite",
      },
    },

  },

1. Data Hiding: Concept: Protecting data from direct external access. In JavaScript: Use closures or private variables to limit access to specific properties.
2. Inheritance: Concept: Creating new objects based on existing ones. In JavaScript: Implement inheritance through prototype chains or ES6 class inheritance.
3. Polymorphism: Concept: Treating different objects as if they’re of a common type. In JavaScript: Achieve polymorphism by method overriding or function overloading.
4. Encapsulation: Concept: Bundling data and methods into a single unit (class). In JavaScript: Use object literals or class definitions to group related data and functions for clean and modular code.

Async return type

Inline type annotation for object

interface EditModeParams { 
selectedList: List; 
listItemsUl: HTMLUListElement; 
API_BASE: string; 
headerName: HTMLDivElement; } 

Type cast event targets

Inlay hints

"editorInlayHint.background": "red",
"editorInlayHint.foreground": "black"

cssText

let movieTitle: string;
let movieLength: number;
let isCategoryAction: boolean;

let tvSerie = "La Brea";
let isDrama = true;

let director: any = "Cristopher Nolan";
director = 10;
director = true;
director();

1. Install the Tailwind extension in VSCode.
2. Install the Tailwind package as a dev dependency. npm i --save-dev tailwindcss note that we’re not really using it, this is just for the extension to start.
3. Add a tailwind.config.js (or .ts) file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,svelte}"],
};

Good stuff in your markdown

// ... Vite glob import above
for (let path in modules) {
  const post = await modules[path]();
  const metadata = post.metadata;

1. Run npx changeset
2. Select the packages using arrows and space to select, enter to confirm. (in monorepo)
3. Select what kind of bump you want (major, minor or patch).
4. Provide a message. Optional, add markdown to make it look nicer.
5. Commit!

1. In the forked project, run npm link.
2. In the other project, run npm link forked-package-name-here.
3. Now you can use your forked package as a dependency in your other project!

> [!NOTE]
> Some important note

> [!IMPORTANT]
> Sorta like CSS

> [!WARNING]
> Some warning