var monitor = require('monitr');
monitor.start();
monitor.stop();

 { status:
     { pid: <pid of the node process>,
       ts: <current time stamp>,
       cluster: <process group id>,
       reqstotal: <total requests processed by this node process server>,
       utcstart: <when the process was started>,
       events: <number of new reports being processed since last stats reporting>,,
       cpu: <cpu usage>,
       mem: <memory usage>,
       cpuperreq: <cpu usage per request>,
       oreqs: <current open requests count>,
       sys_cpu: <system cpu load>,
       oconns: <current open connections count>,
       user_cpu: <user cpu load>,
       rps: <requests per second>,
       kbs_out: <kbs of data transferred since last stats reporting>,
       elapsed: <time elapsed since last event>,
       kb_trans: <total kbs of data transferred>,
       jiffyperreq: <cpu usage in terms of ticks per request>,
       gc: {
           scavenge: { count: <number>, elapsed_ms: <number>, max_ms: <number> },
           marksweep: { count: <number>, elapsed_ms: <number>, max_ms: <number> }
       }
    }
 }

<my-component>
  <div>{state.value}</div>
  <script>
    export default () => ({
      id: "message",
      state: {
        value: ''
      }
    })
  </script>
</my-component>

app.use('myservice', {
  async create(data) {
    return app.setState('message', {
      value: 'Hello!'
    });
  }
});

client.service('myservice').create({});

const LAST_LAUNCH = gql`
  query lastLaunch {
    launch {
      id
      timestamp
    }
  }
`;

export function LastLaunch() {
  const { loading, data } = useQuery(LAST_LAUNCH);
  return (
    <div>
      <h1>Last Launch</h1>
      {loading ? <p>Loading</p> : <p>Timestamp: {data.launch.timestamp}</p>}
    </div>
  );
}

function Message() {
  const [saveMessage, { loading }] = useMutation(SAVE_MESSAGE);
  const [deleteMessage] = useMutation(DELETE_MESSAGE);
  const { data } = useQuery(GET_MESSAGE);

  return (
    <div>
      <p>
        {loading
          ? 'Loading ...'
          : `Message: ${data && data.message ? data.message.content : ''}`}
      </p>
      <p>
        <button onClick={() => saveMessage()}>Save</button>
        <button onClick={() => deleteMessage()}>Delete</button>
      </p>
    </div>
  );
}

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
  .BundleAnalyzerPlugin;

module.exports = {
  plugins: [new BundleAnalyzerPlugin()]
};

//将indexOf转为boolean
!!~[].indexOf(1);

(0 & 0) === 0     // 0 x 0 = 0
(0 & 1) === 0     // 0 x 1 = 0
(1 & 0) === 0     // 1 x 0 = 0
(1 & 1) === 1     // 1 x 1 = 1

(A & 0 = 0) — The bit is always turned off by a corresponding 0 bit.
(A & 1 = A) — The bit remains unchanged when paired with a

const mask = 0b010000;
console.log((0b110010 & mask) === mask); //

function isOdd(int) {
  return (int & 1) === 1; //相当于int % 2 == 0
}

function isEven(int) {
  return (int & 1) === 0;
}

console.log(isOdd(34)); // false
console.log(isOdd(-63)); // true
console.log(isEven(-12)); // true
console.log(isEven(199)); // false

(0 | 0) === 0
(0 | 1) === 1
(1 | 0) === 1
(1 | 1) === 1

(A | 0 = A)
(A | 1 = 1)

const mask = 0b10101010;

console.log(0b11010000 | mask); // 0b11111010

(0 ^ 0) === 0
(0 ^ 1) === 1
(1 ^ 0) === 1
(1 ^ 1) === 0

function rgbToHex([red = 0, green = 0, blue = 0] = []) {
  return `#${((red << 16) | (green << 8) | blue).toString(16)}`;
}

function hexToRgb(hex) {
  hex = hex.replace(/^#?([0-9a-f]{6})$/i, '$1');
  hex = Number(`0x${hex}`);

  return [
    (hex >> 16) & 0xff, // red
    (hex >> 8) & 0xff, // green
    hex & 0xff // blue
  ];
}

const LIST_FRACTION = 0x1; // (001)
const LIST_UNIQUE = 0x2; // (010)
const LIST_SORTED = 0x4; // (100)

// 打开配置
const LIST_ALL = LIST_FRACTION | LIST_UNIQUE | LIST_SORTED; // (111)

// 关闭配置
const LIST_DEFAULT = LIST_ALL ^ LIST_UNIQUE; // (101)

//判断配置
(flag & LIST_UNIQUE) === LIST_UNIQUE; //(存在)
(flag & LIST_UNIQUE) !== LIST_UNIQUE; //(不存在)

const formatter = new Intl.NumberFormat('fr');
formatter.format(12345678901234567890n);
// → '12 345 678 901 234 567 890'
formatter.formatToParts(123456n);
// → [
// →   { type: 'integer', value: '123' },
// →   { type: 'group', value: ' ' },
// →   { type: 'integer', value: '456' }
// → ]

const formatter = new Intl.NumberFormat('en', {
  style: 'unit',
  unit: 'kilobyte'
});
formatter.format(1.234);
// → '1.234 kB'
formatter.format(123.4);
// → '123.4 kB'

const formatter = new Intl.NumberFormat('en');
formatter.format(987654.321);
// → '987,654.321'
formatter.formatToParts(987654.321);
// → [
// →   { type: 'integer', value: '987' },
// →   { type: 'group', value: ',' },
// →   { type: 'integer', value: '654' },
// →   { type: 'decimal', value: '.' },
// →   { type: 'fraction', value: '321' }
// → ]

// Test compact notation.
const formatter = new Intl.NumberFormat('en', {
  notation: 'compact'
});
formatter.format(1234.56);
// → '1.2K'
formatter.format(123456);
// → '123K'
formatter.format(123456789);
// → '123M'

const formatter = new Intl.NumberFormat('en', {
  style: 'unit',
  unit: 'meter-per-second',
  notation: 'scientific'
});
formatter.format(299792458);
// → '2.998E8 m/s'

const formatter = new Intl.NumberFormat('en', {
  style: 'unit',
  unit: 'percent',
  signDisplay: 'always'
});
formatter.format(-12.34);
// → '-12.34%'
formatter.format(12.34);
// → '+12.34%'
formatter.format(0);
// → '+0%'
formatter.format(-0);
// → '-0%'

const formatter = new Intl.NumberFormat('en', {
  style: 'currency',
  currency: 'USD',
  signDisplay: 'exceptZero',
  currencySign: 'accounting'
});
formatter.format(-12.34);
// → '($12.34)'
formatter.format(12.34);
// → '+$12.34'
formatter.format(0);
// → '$0.00'
formatter.format(-0);
// → '($0.00)'

var FileSaver = require('file-saver');
//保存Blob
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "hello world.txt");

// 保存链接
FileSaver.saveAs("https://httpbin.org/image", "image.jpg");

//保存canvas
var canvas = document.getElementById("my-canvas");
canvas.toBlob(function(blob) {
    saveAs(blob, "pretty image.png");
});

import Flippy, { FrontSide, BackSide } from 'react-flippy';
// ... component class
render() {
	// .. return
  <Flippy
    flipOnHover={false} // default false
    flipOnClick={true} // default false
    flipDirection="horizontal" // horizontal or vertical
    ref={(r) => this.flippy = r} // to use toggle method like this.flippy.toggle()
    // if you pass isFlipped prop component will be controlled component.
    // and other props, which will go to div
    style={{ width: '200px', height: '200px' }} /// these are optional style, it is not necessary
  >
    <FrontSide
      style={{
        backgroundColor: '#41669d',
      }}
    >
      RICK
    </FrontSide>
    <BackSide
      style={{ backgroundColor: '#175852'}}>
      ROCKS
    </BackSide>
  </Flippy>
}

<!DOCTYPE html>
<html>
  <head>
    <title>Riot Example: Timer</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <timer></timer>

    <!-- riot tags -->
    <script src="timer.riot" type="riot"></script>

    <!-- scripts we need -->
    <script src="https://cdn.jsdelivr.net/npm/riot@4/riot+compiler.min.js"></script>

    <!-- mount this app -->
    <script>
      riot.compile().then(() => {
        riot.mount('timer', { start: 0 });
      });
    </script>
  </body>
</html>

.glowAndGrow {
  height: 100px;
  transition: background-color 0.5s, height 1s;
}
.glowAndGrow:hover {
  background-color: gold;
  height: 200px;
}
<div class="glowAndGrow">This box glows and grows on hover</div>

import styles from "styles.css";
document.adoptedStyleSheets = [...document.adoptedStyleSheets, styles];

# 取余
> 5 rem -3
2
# 取模
> 5 mod -3
-1

Math.trunc(5 / -3);

Math.floor(5 / -3);