NoteBook of sqwwwok

In React Native, logical AND may cause crash as below.

Conditional rendering in React Native may crash your app

This babel plugin here can replace all logical AND with ternary operators, with a little more configuration.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

// .babelrc.js
module.exports = function (api) {
    api.cache(true);

    const presets = [];
    const plugins = [
        './ternary-jsx.js',
// this two plugins below only parse but not transform code
        ['@babel/plugin-syntax-decorators', { decoratorsBeforeExport: true }],
        ['@babel/plugin-syntax-class-properties', { loose: true }],
    ];

    return {
        parserOpts: {
            plugins: ['jsx', 'typescript'],
        },
        presets,
        plugins,
        generatorOpts: {
            retainLines: true,
            compact: false,
            minified: false,
            concise: false,
        },
    };
};

However, Babel will lose some code formatting in the process, as it works based on the AST..

引言

开发过程中经常会碰到相同的逻辑，一般为了代码的整洁性，都会进行复用。
但是是不是所有相同的逻辑都需要复用呢？

实际场景

有两个商品卡片需要实现，其中一个是热点商品，一个是普通商品
两个在长相上有一些区别，大概在30%左右
热点商品多了标签，背景色，按钮等功能

• 复用型写法I

1
2
3
4
5
6
7
8
9
10
11
12

function ProductCard({isHot, price, productImage, productUrl}) {

  return (
    <div style={isHot ? styles.cardWithBg : {}}>
      {isHot && <Tag />}
      <span>{price}</span>
      {isHot && <Button />}
      <img src={productImage} onClick={() => Navigate.push(productUrl)} />
    </div>
  )

}

• 复用型写法Ⅱ

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

function CommonProductCard({price, productImage, productUrl}) {
  return (
    <div>
      <Price price={price} />
      <ProductImage image={productImage} url={productUrl} />
    </div>
  )
}

function HotProductCard({price, productImage, productUrl}) {
  return (
    <div style={styles.cardWithBg}>
      <Tag />
      <Price price={price} />
      <Button />
      <ProductImage image={productImage} url={productUrl} />
    </div>
  )
}

function Price({price}) {
  return <span>{price}</span>
}

function ProductImage({image, url}) {
  return <img src={productImage} onClick={() => Navigate.push(productUrl)} />
}

复用型I的代码说不上来的别扭，绝对的垃圾代码
复用型Ⅱ是经常能见到的，看起来解耦非常不错，也容易理解，但是细想：
热点商品为什么要跟普通商品的UI复用？两者本来就应该长得不一样。现在只是恰巧有某些地方是一样的，后来我说不定就改了。

技术层面复用逻辑没有问题，但是回到需求本身，这种复用是没有必要的，本来这两个东西就应该是分开的。
所以不如复制粘贴再写一遍更好：

• 分离型写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

function CommonProductCard({price, productImage, productUrl}) {
  return (
    <div>
      <span>{price}</span>
      <img src={productImage} onClick={() => Navigate.push(productUrl)} />
    </div>
  )
}

function HotProductCard({price, productImage, productUrl}) {
  return (
    <div style={styles.cardWithBg}>
      <Tag />
      <span>{price}</span>
      <Button />
      <img src={productImage} onClick={() => Navigate.push(productUrl)} />
    </div>
  )
}

总结

不要盲目的复用代码，即使他们在逻辑上有相同之处，也要看这种逻辑相同是否是需求所期望的，可能只是偶发性的相同。

How to add Category and Tag page

If you want one page list all categories, just create source/categories/index.md, and then write type: categories in it, which tells Hexo to create public/categories/index.html. “Tags”, “About” are the same.

1
2
3
4

cd source
mkdir categories
cd categories
vi index.md

1
2
3
4
5
6

<!-- index.md -->
---
title: categories
type: "categories"
---

Backgrounds

1
2

parseInt(0.0000005)
// 5

Explanations

​ parseInt accepts string as the first argument, represents the value to parse. If this argument is not a string, then it is converted to one using the ToString abstract operation.

​ In JavaScript, the number which has more than 6 zeros in front of the first non-zero digit will be displayed in scientific notation, specified by ECMA . That means , 0.00000005.toString() will return '5e-7'

​ So, the code above can be explained as following:

1
2
3
4
5
6
7

0.0000005.toString()
// '5e-7'

parseInt(5e-7)
// 5
parseInt('5e-7')
// 5

Extra

What about postive numbers ?

1
2
3
4
5
6
7
8
9
10
11

parseInt(5e7)
parseInt(50000000)
// both return 50000000

// 5e7 will not be displayed in scientific notation
5e7.toString()
// '50000000'

// '5e6' is string
parseInt('5e6')
// 5

Tips

parseInt should not be used as a substitute for Math.floor()

Traditional currency system

1. Role of Central Banks: Central banks issue fiat currency and use tools like interest rate policies to regulate the economy.
2. Regulation and Compliance: Financial institutions are supervised by government and regulatory bodies to ensure stability and transparency in the financial system.
3. Credit System: The modern monetary system relies on a credit system, where individuals and businesses obtain loans and credit through banks.

It is clear that the traditional monetary system is centered around governments and central banks.

What is de-centralized

Imagine a system, where everyone can earn currency through a certain amount of labor and freely engage in transactions. In the absence of a central organization, individuals cannot deceive others to obtain currency or fabricate transactions, just like being compelled to adhere to the laws of physics.

How to solve trust problem?

PoW(Proof of Work).

How to drive miner running the server?

Bonus.

How to run one app on the blockchain?

DApp. Introduce ETH.

How to speed up the transaction?

DPoS.

How to exchange with other coins?

WBTC.

what is the cryptocurrency exchanges?