Reference resource: How to do negative pattern for VS Code files exclude

VSCode does not supprt negative regular expression (‘!’) on user settings files.exclude.

But we could have work around to set file exclusion rule in file explorer.

For example, if we only want to display node_modules/@project folder and hide all other folders, the setting could be like this:

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

// File explorer
"files.exclude": {
  // Not hide node modules
  "**/node_modules/": false,
  // Hide node modules started with .
  "**/node_modules/.*": true,
  // Hide node modules started with any letter except @
  "**/node_modules/[abcdefghijklmnopqrstuvwxyz]*": true,
  // Hide node modules started with @ and any letter except p
  "**/node_modules/@[abcdefghijklmnoqrstuvwxyz]*": true,
  // Hide node modules started with @ and any letter except pr
  "**/node_modules/@p[abcdefghijklmnopqstuvwxyz]*": true,
  // Hide node modules started with @ and any letter except pro
  "**/node_modules/@pr[abcdefghijklmnpqrstvwxyz]*": true,
},

This could work perfectly. Yep.

写React项目与后端进行交互的时候，之前一直是在使用fetch方法，然而fetch方法有几个缺点需要注意。
同时对比一下最近很火的axios.js，发现可以考虑开始使用新的类库了。

Fetch data

fetch

调用fetch api拿到response之后，通常我们需要两步来解析response中的数据。

1
2

const url = 'some_api_url';
fetch(url).then(data => console.log(data));

response中的数据有status，还有body。但会发现body的数据类型是一个ReadableStream而不是一个正常的json或者string。我们需要用response.json()来进行转换。注意这个方法是返回一个promise对象，所以要继续调用then来解析。

1
2

const url = 'some_api_url';
fetch(url).then(response => response.json()).then(data => console.log(data));

这时的data就是我们需要的json或者string数据。

axios

$ npm install --save axios

1
2
3
4
5
6

// React - ES6
import axios from 'axios'
// Nodejs
const axios = require('axios')
// HTML
const lib_url = 'https://cdnjs.cloudflare.com/ajax/libs/axios/0.15.3/axios.min.js'

使用时和fetch类似。

1

axios.get(url).then(response => console.log(response));

可以看到response的数据结构和jquery接口很像，包含了status和data。status是请求返回的状态码，data就是response的数据主体。跟fetch对比起来要少一步promise解析。

Error Handling

fetch

遇到错误处理，通常是使用catch方法来进行捕捉，但是使用fetch时，这种方法会失效。

1
2
3
4

const url = 'wrong_api_url';
fetch(url)
    .catch(error => console.log('BAD', error))
    .then(response => console.log('GOOD', response));

使用一个错误的api url，但是看结果会发现还是进入了then的回调函数中。只是状态码变成了400。

axios

使用axios时，catch中的回调函数就会被调用到。

1
2
3
4

const url = 'wrong_api_url';
axios(url)
    .catch(error => console.log('BAD', error))
    .then(response => console.log('GOOD', response));

打出的error log是：

BAD ERROR: Request failed with status code 400

可以看出在这两方面中，axios确实是比fetch好用很多。

参考来源：

Fetch vs. Axios.js for making http requests

目前在做一个图片展示页面，使用的是create-react-app搭建起来的react应用。只是突发奇想页面渲染过程中，如何能把图片保存在server端。

直接在React代码中使用保存文件的api目前还没有找到，所以只能寄希望于nodejs端来解决保存问题。

大概在网上搜了一下，目前普遍的做法跟自己想的比较类似，就是在nodejs自定义一个保存图片的api，然后React代码中发送api请求，nodejs端捕获，并且保存对应的图片到server文件系统中。

实践起来还是比较复杂的，中间遇到的问题也不少。

搭建Nodejs Server

模块导出的声明语句有很多种：

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

module.exports.hello = function() {
    console.log('hello');
}

module.exports = {
    hello: function() {
        console.log('hello');
    }
}

exports.hi = function() {
    console.log('hi');
};

const david = 'David';
export default david;

export {
    hiDavid: function() {
        console.log('Hi David!');
    }
};

Nodejs遵循的是CommonJS规范，使用require方法来加载模块，而ES6中是使用import来加载模块。参考这个图片：

module.export vs exports

1
2
3

function (exports, require, module, __filename, __dirname) {
    //...
}

可以看出require规范下module和exports都是内置的变量。但是exports是被module.exports引用的，所以给任意其一赋值都是可行的。

1
2
3
4
5
6
7
8
9

// working
module.exports.hello = function() {
    console.log('hello');
}

// working
exports.hi = function() {
    console.log('hi');
};

这种情况下，模块导出的是包含两个方法的对象。但是对比下面的声明：

1
2
3
4
5
6
7
8
9
10
11

// working
module.exports = {
    hello: function() {
        console.log('hello');
    }
}

// NOT Working!!
exports.hi = function() {
    console.log('hi');
};

这种情况下，第二个声明失效，因为module.exports已经被直接赋值，exports会被忽略。
另外，因为exports只是一个变量，所以直接给其赋值也是无意义的。

1
2
3
4
5
6
7
8
9
10

// working
module.exports.hello = function() {
    console.log('hello');
}
// NOT Working!!
exports = {
    hi: function() {
        console.log('hi');
    }
}

Nodejs

require方法无法识别export导出语句，会直接报错。因此Nodejs环境下只能使用module.exports或者exports语法。

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

// module.js
module.exports.hello = function() {
    console.log('hello');
}

exports.hi = function() {
    console.log('hi');
};

const david = 'David';
exports.default = david;

// index.js
var module = require('./module.js');
console.log(module); // {hello: function, hi: function, default: "David"}

ES6

import语句可以识别module.exports、exports和export语法。

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

// module.js
module.exports.hello = function() {
    console.log('hello');
}

exports.hi = function() {
    console.log('hi');
};

const david = 'david';
const hiDavid = function() {
    console.log('Hi David');
};

export default david;
export {
    hiDavid
};

// index.js
import test, {hello} from './module.js';
import TestModule from './module.js';
console.log(test);        // david
console.log(hello);       // function
console.log(TestModule);  // {hello: function, hi: function, default: "david", hiDavid: function}

可以猜想到，import方法中，export default和exports.default是被认为相似的声明，而且不会强制认为必须是相同的导出导入名称匹配。

这种互通，在Server Side Rendering技术中会有更好的体现。在服务器渲染技术中，我们需要找到一种声明在ES6模块（比如React代码）和Nodejs中都可以被识别，这种情况下，使用module.exports / exports顶替export会是更好的选择。

先上一张神图：

以height为例：

offsetHeight

MDN Definition

1

is a measurement which includes the element borders, the element vertical padding, the element horizontal scrollbar (if present, if rendered) and the element CSS height.

offsetHeight = 可看到的元素高度 + 纵向padding + 边框高度 + 横向滚动条高度

clientHeight

MDN Definition

1

returns the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or margin

clientHeight = 可看到的元素高度 + 纵向padding - 横向滚动条高度

scrollHeight

MDN Definition

1

is a measurement of the height of an element's content including content not visible on the screen due to overflow

scrollHeight = 可看到的元素高度 + 看不到的元素高度 + 纵向padding

参考文章来源：

The properties of offsetTop, clientTop, scrollTop in the JS
What is offsetHeight, clientHeight, scrollHeight?

Recently when I tried to debug in safari incognito mode, an error always occurs:

[Error] QuotaExceededError (DOM Exception 22): The quota has been exceeded.

The root cause is that: storage api, like localStorage / sessionStorage is not supported in safari incognito mode.

According to the MDN wiki, the localStorage is set as an object with a quota of zero, which will make it unusable.

A way is required to detect whether the storage api is available under current browser session.

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
28
29
30

function storageAvailable(type) {
    try {
        var storage = window[type],
            x = '__storage_test__';
        storage.setItem(x, x);
        storage.removeItem(x);
        return true;
    }
    catch(e) {
        return e instanceof DOMException && (
            // everything except Firefox
            e.code === 22 ||
            // Firefox
            e.code === 1014 ||
            // test name field too, because code might not be present
            // everything except Firefox
            e.name === 'QuotaExceededError' ||
            // Firefox
            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
            // acknowledge QuotaExceededError only if there's something already stored
            storage.length !== 0;
    }
}

if (storageAvailable('localStorage')) { // or storageAvailable('sessionStorage')
    // use local storage
}
else {
    // Too bad, no localStorage for us
}

Post source: Requiring modules in Node.js: Everything you need to know

这篇文章主要介绍require方法在nodejs开发中的一些应用技巧。除此之外，模块化开发也会有一些涉及。

1

const config = require('/path/to/config');

针对require()方法，Node的执行步骤主要分以下5步。

1. 转义。将相对路径转义（resolve）为绝对路径。
2. 装载。在这一步中，VM并非会去执行所加载的模块代码。其主要是分析对应路径下的文件是哪种类型，比如.js、.json甚至是c++文件。
3. 封装。将装载的文件代码封装到一个私有的上下文中，并使其变为可执行代码。
4. 执行。这一步中，Node的VM才会去执行所装载的代码。
5. 缓存。将所加载的文件缓存起来，以便下次再require时不需要将前几个步骤再重复一遍。

Recently I have learned some basic rules about flex layout based on this post A complete guide to Flexbox.

Introduction

Right beginning: display: flex only affects the items inside the container, but of course for the container, it is a block element. So the container will possess one line of the page.

Also, it is a 1-dimensional layout, mainly focuses on line layout. Really friendly to responsive design.

For comparison, there is another layout style named grid. It is covered by another post A complete guide to Grid. Will discuss that in future posts.

Main Properties

display | container

1
2
3

.container {
    display: flex; // another value: inline-flex;
}

inline-flex will only affect the container to be an inline element. The items inside the container are placed as inline elements no matter it is flex or inline-flex.

flex-direction | container

1
2
3

.container {
    flex-direction: row | row-reverse | column | column-reverse;
}

flex-order | item

1
2
3

.item {
    flex-order: 1; // any other integer
}

Place items in the sequence of flex-order.

flex-grow | item

1
2
3

.item {
    flex-grow: 1; // any positive number or by default 0
}

If all items flex-grow is 0, no extra space will be distributed to all items.

flex-wrap | container

1
2
3

.item {
    flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap will put all items in one line.

flex-shrink | item

1
2
3

.item {
    flex-shrink: 1; // any integer
}

flex-flow | container

Combination for flex-direction and flex-wrap.

1
2
3

.container {
    flex-flow: 'flex-direction' || 'flex-wrap'; // default 'row nowrap'
}

flex-basis | item

1
2
3

.item {
    flex-basis: <length> | auto; /* default auto */
}

length would be a real valid number like 80px.
If it is a valid length value, it means the item should use this as its width.
If it is 0, the extra space around content in an item is not counted in when distributing the rest space in line of flex container.
If it is auto, the extra space around content in an item is distributed based on its flex-grow value.

See this picture to figure out its usage.

justify-content | container

1
2
3

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

flex | item

Combination for flex-grow, flex-shrink and flex-basis.

1
2
3

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

flex-shrink and flex-basis are optional. By default, 0 1 auto.

Incompatible Setting

Note that float, clear and vertical-align is not working under flex layout.

This is just to record all the issues I met during React development.

Super

Issue blog: What’s the difference between “super()” and “super(props)” in React when using es6 classes?

1
2
3
4
5
6
7
8
9

// if you want to access `this.props` in constructor
class MyComponent extends React.Component {
    constructor(props) {
        super(props)

        console.log(this.props)
        // -> { icon: 'home', … }
    }
}

vs

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

// If you do not want to access `this.props` in constructor
class MyComponent extends React.Component {
    constructor(props) {
        super()

        console.log(this.props)
        // -> undefined

        // Props parameter is still available
        console.log(props)
        // -> { icon: 'home', … }
    }

    render() {
        // No difference outside constructor
        console.log(this.props)
        // -> { icon: 'home', … }
    }
}

DisplayName

SomeComponent.displayName is just to identify the name of current module.

No functional use, just to help the debug to be clear.

Issue blog: What is React component ‘displayName’ is used for?

React source code during debugging: Debug code in react

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

function warnIfInvalidElement(Component, element) {
  if (__DEV__) {
    warning(
      element === null || element === false || React.isValidElement(element),
      '%s(...): A valid React element (or null) must be returned. You may have ' +
      'returned undefined, an array or some other invalid object.',
      Component.displayName || Component.name || 'Component'
    );
    warning(
      !Component.childContextTypes,
      '%s(...): childContextTypes cannot be defined on a functional component.',
      Component.displayName || Component.name || 'Component'
    );
  }
}

最近看有关性能问题的分析，遇到几个名词：Host、Domain、Server。有点混淆不清，所以简单查了一下。

DNS(Domain Name Service)可以准确翻译某个指定的IP地址，找到对应的计算机，反之亦然。

IP地址比较难以记忆，所以Internet允许给网络中的计算机指定一个字符串定义的名称。比如IP地址为18.72.0.3就被指定为bitsy.mit.edu。整个字符串就是这台计算机的host name。第一部分的bitsy是机器名，其余的mit.edu是其domain name。

另外还有一张图能够说明host name和domain name的关系。

Domain name和SubDomain name比较好区分：

• example.com是一个域名；

• tools.example.com是example.com上的子域名。

来源：

IP Addresses, Host Names, and Domain Names

Subdomain vs Domain