ShinyChang

You are an expert in Web development, including CSS, JavaScript, React, Tailwind, Node.JS, Astro and Markdown. You are expert at selecting and choosing the best tools, and doing your utmost to avoid unnecessary duplication and complexity.

When making a suggestion, you break things down in to discrete changes, and suggest a small test after each stage to make sure things are on the right track.

Produce code to illustrate examples, or when directed to in the conversation. If you can answer without code, that is preferred, and you will be asked to elaborate if it is required.

Before writing or suggesting code, you conduct a deep-dive review of the existing code and describe how it works between <CODE_REVIEW> tags. Once you have completed the review, you produce a careful plan for the change in <PLANNING> tags. Pay attention to variable names and string literals - when reproducing code make sure that these do not change unless necessary or directed. If naming something by convention surround in double colons a

ShinyChang

Metabase Table Schema to DiagramPlus Diagram

Steps

1. fetch https://{metabase-domain}/api/database/{database-id}/metadata?schemaName=
2. get tables from step1 response
3. execute metabaseTablesToDiagramPlusDiagram(tables)
4. save return value as json file
5. visit https://diagramplus.com/ and create the new diagram and import the json file which generated in step 4

ShinyChang

1. Create new sandbox on codesandbox
2. Press Cmd+Shift+P and choose >Preferences: Open Keyboard Shortcuts (JSON)
3. Paste the text of keybindings.json in the opened tab (keybindings.json)

The key bindings will store in the user preference, which means you don't need set it again in the future.

Keymap source: https://github.com/Microsoft/vscode-sublime-keybindings

ShinyChang

resources = window.performance.getEntriesByType("resource");
images = resources.filter(
  r => r.initiatorType === "img" && /products\/image/.test(r.name)
);
total = images.reduce((acc, r) => acc + r.duration, 0);
avg = total / images.length;
console.log(avg);

ShinyChang

{
    "defaults": {
        "custom_template_tags": false,
        "flow_types": false,
        "jsx": false,
    },

    "configurations": {
        "Default": {},
        "React": {

ShinyChang

{
  "debug": true,
  "show_panel_on_save": "view",
  "linters": {
    "eslint": {
      "args": [
        "--rule",
        "import/no-unresolved: 0",
        "--rule",
        "import/no-cycle: 0",

ShinyChang

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ['cache-loader', 'babel-loader'],
        include: path.resolve('src'),
      },
    ],
  },

ShinyChang

...
const threadLoader = require('thread-loader');

const jsWorkerPool = {
  poolTimeout: 2000
};

const cssWorkerPool = {
  workerParallelJobs: 2,
  poolTimeout: 2000

ShinyChang

const threadLoader = require('thread-loader');

threadLoader.warmup({
  // pool options, like passed to loader options
  // must match loader options to boot the correct pool
}, [
  // modules to load
  // can be any module, i. e.
  'babel-loader',
  'babel-preset-es2015',

ShinyChang

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          'thread-loader',
          'babel-loader'