



## 介绍

滚动是常见的交互方式。包含页面、容器、元素，滚动距离、滚动条等概念。

## 滚动距离关系

`Element.scrollTop`是有滚动条元素的垂直滚动距离。用来表示元素顶部到已滚动内容顶部的距离。当元素在顶部或没有滚动条时，值为`0`。

### 图片示例

![scorll img](/assets/scrollTop.png)

## 场景

### 元素滚动到顶部


#### scrollIntoView
```
element.scrollIntoView({behavior: 'smooth', block: 'start'});
```

#### offsetTop

[offsetTop](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop) 是当前元素到父元素（offsetParent）的相对距离。使用`offsetTop`属性和 `scrollTo`方法。

```javascript
// 需要滚动到顶部的元素
const dom = document.querySelector('.class');

container.scrollTo({
  top: dom.offsetTop,
  behavior: 'smooth',
});
```

#### 直接控制容器的滚动条
```javascript
const container = document.querySelector('.container')
container.scrollTop = top;
```

#### offsetParent order
- the nearest positioned ancestor element
- td, th, table
- body

> `<body>`如果设置了`overflow-x: hidden`，会导致滚动失效。需要去掉该样式。

### 让容器滚动到底部

[参考](https://stackoverflow.com/a/33193694/5154601)

```javascript
const dom = document.querySelector('.class')
dom.scrollTop = dom.scrollHeight - dom.clientHeight;
```

### 判断元素接近底部

```javascript
const div = document.getElementById(id);
if (div.scrollHeight - div.scrollTop - div.clientHeight < 1) {
  console.log('near bottom!');
}

// 针对 window 和 document.body
const innerHeight = window.innerHeight // 或者 document.body.clientHeight
if (document.body.scrollHeight - window.scrollY - innerHeight < 100) {
  console.log('near bottom!');
}
```

### 判断元素的位置

在滚动过程中，可能需要确定某个元素所处的位置，例如接近顶部。可以使用[getBoundingClientRect()](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect)方法，获取到 viewport 的绝对距离。

![](/assets/rect.png)

```javascript
scrollElement.addEventListener('scroll', event => {
  const target = document.getElementById(id);
  const rect = target.getBoundingClientRect();
  if (rect.top < 100) {
    // near top
  }

  if (rect.bottom > 800) {
    // near bottom
  }
}, { passive: true });
```


### 跨平台滚动（手机和桌面等）

移动端（webview）：window.scrollTo(x, y)

浏览器：window.scrollTo(options)

```javascript
if (platform === 'app') {
  window.scrollTo(0, top);
} else {
  window.scrollTo({
    top,
    behavior: 'smooth',
  });
}
```

### touch events

`touchmove`, `touchstart`, `touchend` 等事件，在移动平台也可以用来检测页面滚动（pageY）或滑动（pageX）

```javascript
element.addEventListener('touchstart', event => {
  // event.changedTouches[0].pageY
});

element.addEventListener('touchend', event => {
  // event.changedTouches[0].pageY
});

element.addEventListener('touchmove', event => {
  // event.touches[0].pageY
});
```

###  提升滚动性能

[Passive event listeners](https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md): 当确定不会调用 preventDefault 时，设置被动式监听事件，可以显著提升浏览器的滚动性能。

[Throttle](article/javascript-throttle.md)/[Debounce](article/javascript-debounce.md): 可以设置响应函数的调用间隔。

```javascript
target.addEventListener(type, listener, { passive: true });
```

[Improving scrolling performance with passive listeners](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Improving_scrolling_performance_with_passive_listeners)


### ios Modal 滚动卡顿解决方案

```css
overflow: scroll;
-webkit-overflow-scrolling: touch;
```


滚动（scroll）tips





## 介绍

[jsplumb](https://github.com/jsplumb/jsplumb) 是一个 javascript 库。可用于展示系统架构、流程图、组件关系等。

## 概念

这些概念主要用于描述一个连接(connections)的属性。

Source：连接的起始元素

Target：连接的终点元素

Endpoint: 连接的起点或终点

Connector：连接的线

Overlay：用于描述连接的 UI，例如标签或箭头等。

Anchor：Endpoint 相对于元素的位置

Group：把一组元素折叠到一个大的元素里面。

## Demo

[Demo 代码](https://github.com/jsplumb/jsplumb/blob/master/demo)

### Demo/state machine

[代码](https://github.com/jsplumb/jsplumb/blob/master/demo/statemachine)


jsplumb：连接可视化（流程图等）





## 介绍

JavaScript 自动管理内存。但错误的代码和实现方式仍会引起内存问题。包括内存泄露、内存膨胀、频繁的垃圾回收等。Chrome 及其 DevTools 可以帮助发现和定位内存问题。

## 参考

[Fix Memory Problems][0]

## TL;DR

- 用 `Chrome Task Manager` 查看页面内存
- 用 `Performance(Timeline)` 可视化内存使用
- 用 `Heap Snapshots` 定位分离的 DOM trees
- 用 `Allocation Timeline recordings` 查看堆内存分配对象、函数
- 用 `Audits` 分析页面性能

## 概览

内存问题主要影响性能。根据 [RAIL][1] 性能模型，性能优化的目标应该是**用户**。`Audits`可以分析页面性能。

### 目标

- 关注用户
- 100ms 内响应用户输入
- 10ms 内渲染动画或滚动帧
- 最大化主线程空闲时间
- 5000ms 内加载交互内容

## Chrome Task Manager

浏览器菜单 > More tools > Task manager，右键显示`JavaScript Memory`, 列中带 live 的数据即当前页面可用对象占用的内存。如果数值一直在增加，说明有对象在创建或膨胀。

## Performance(Timeline)

DevTools > Performance。点开始记录后进行相关操作，再停止记录。选中 Memory 复选框，可以查看随时间变化的内存使用情况(Heap, Nodes, Listeners 等)。

> 由于工具本身问题，Listeners 会一直增加。
>
> Timeline for Chrome < 58

## Memory(Profile)

DevTools > Memory。

### Heap snapshot
选中`Heap snapshot`后点 takeshot 按钮。可以查看当前堆内存快照。快照的`Class filter`中填入`detached`可以查看分离的 DOM 节点。

> 当对象不在 DOM 树中，且没有任何引用才会被垃圾回收掉。那些已经不在 DOM 树中，但还有引用的称为分离（`detached`）节点。

### Allocation instrumentation on timeline

按时间记录 JavaScript 内存分配的**对象**。

选中`Allocation instrumentation on timeline`后点 Start 按钮，执行相关操作后内存分配的对象都会被记录下来。选中蓝条后会展示对应的对象。

### Allocation sampling

按时间记录 JavaScript内存分配的**函数**（调用栈）

选中`Allocation sampling`后点 Start 按钮，执行相关操作后内存分配函数调用都会被记录下来。可以按 Chart、Heavy、Tree 三种方式查看。

## Performance monitor

DevTools > More tools > Performance monitor。可以实时查看各项性能指标。

## Audits

DevTools > Audits。分析当前页面可能存在的性能问题。


[0]: https://developers.google.com/web/tools/chrome-devtools/memory-problems/
[1]: https://developers.google.com/web/fundamentals/performance/rail


JavaScript Memory Problems（内存问题）





## 介绍

event 在 DOM 中传递是按阶段来的，大致分为 bubbling 和 capture。

[参考][0]

## Bubbling（冒泡）

DOM 有 event 触发时，首先在该 DOM 运行，然后往父节点逐个传递触发。

bubbling 过程：

    form
        ^
        |
        div
            ^
            |
            p

```html
<style>
  form, form * {
    margin: 10px;
    border: 1px solid blue;
  }
</style>

<form onclick="alert('form')">FORM
  <div onclick="alert('div')">DIV
    <p onclick="alert('p')">P</p>
  </div>
</form>
```

<style>
  form, form * {
    margin: 10px;
    border: 1px solid blue;
  }
</style>

<form onclick="alert('form')">FORM
  <div onclick="alert('div')">DIV
    <p onclick="alert('p')">P</p>
  </div>
</form>


## event.target

事件的回调函数会获得 DOM 事件对象 `event`。`event` 记录了事件相关信息。

- `event.target`：触发事件的最底部 DOM 元素。bubbling 过程中不变。
- `event.currrentTarget`（回调函数中的 this）：当前处理事件的 DOM 元素。

```html
<form id="form">FORM
  <div>DIV
    <p>P</p>
  </div>
</form>

<script>
  const form = document.querySelector('#form');
  form.onclick = function (event) {
    alert('Target=' + event.target.tagName + ', ' + 'this=' + this.tagName);
  }
</script>
```

<style>
  form, form * {
    margin: 10px;
    border: 1px solid blue;
  }
</style>


<form id="form">FORM
  <div>DIV
    <p>P</p>
  </div>
</form>

<script>
const form = document.querySelector('#form');
form.onclick = function (event) {
  alert('Target=' + event.target.tagName + ', ' + 'this=' + this.tagName);
}
</script>

### stop bubbling（event.stopPropagation()）

默认情况下 bubbling 会在一直在 DOM 树中向上传递。如果不要再传递事件，可以调用`event.stopPropagation()`

> event.preventDefault() 可以取消事件的默认动作。例如，可以取消按钮的提交表单动作。

```html
<form onclick="alert('Button event bubbling does not reach here')">FORM
  <button onclick="event.stopPropagation();event.preventDefault();">Click me</button>
</form>
```

<form onclick="alert('Button event bubbling does not reach here')">FORM
  <button onclick="event.stopPropagation();event.preventDefault();">Click me</button>
</form>

## Capture（捕获）

完整 DOM 事件传递分为三个阶段

1. Capture phase - 向下
1. Target phase - 到达目标
1. Bubbling phase - 向上

Capture 阶段很少用到，通常是感知不到的。

要在 capture 阶段处理事件，添加回调函数时需要额外设置参数

```javascript
elem.addEventListener(..., { capture: true });
// or
elem.addEventListener(..., true);
```

`capture`参数

- `false`（默认），在 bubbling 阶段处理事件
- `true`，在 capture 阶段处理事件


```html
<form>FORM
  <div>DIV
    <p>P</p>
  </div>
</form>

<script>
  for(let elem of document.querySelectorAll('#event-phase *')) {
    elem.addEventListener('click', e => alert(`Capture: ${elem.tagName}`), true);
    elem.addEventListener('click', e => alert(`Bubbling: ${elem.tagName}`));
  }
</script>
```

<div id="event-phase">
<form>FORM
  <div>DIV
    <p>P</p>
  </div>
</form>
</div>

<script>
  for(let elem of document.querySelectorAll('#event-phase *')) {
    elem.addEventListener('click', e => alert(`Capture: ${elem.tagName}`), true);
    elem.addEventListener('click', e => alert(`Bubbling: ${elem.tagName}`));
  }
</script>

### addEventListener 参数

```javascript
target.addEventListener(type, listener[, options]);
// or
target.addEventListener(type, listener[, useCapture]);
```

`options`（默认值都是`false`）

- `capture`: 如果`true`，捕获阶段处理（同 `useCapture`）

- `once`: 如果`true`，回调函数最多调用一次

- `passive`: 如果`true`，回调函数不会调用`preventDefault`，可以直接执行默认动作。某些场景（例如滚动）下可以提升性能

## 总结

事件处理过程：

- 事件发生时，相关最底部的元素会标记为目标元素（`event.target`）

- 事件从根元素传递到目标元素，调用`capture`设置为`true`的事件回调函数（capture）

- 事件从目标元素传递到根元素，调用默认的事件回调函数（bubbling）

[0]: https://javascript.info/bubbling-and-capturing


JavaScript DOM events





## 介绍

本地调试通常都是以`http`协议直接访问`localhost`，有时候会遇到需要以 https 访问的情况，那么如何配置本地启用 https 协议呢？

关键在于使用`openssl`生成证书，将`localhost`域名纳入信任列表。

[How to get HTTPS working on your local development environment in 5 minutes][0]
[How to get HTTPS working in localhost development environment][1]

## 设置

### 生成凭证和证书

1. 生成 rootCA.key（设置并记住密码）

        openssl genrsa -des3 -out rootCA.key 2048

1. 生成 rootCA.pem

        openssl req -x509 -new -nodes -key rootCA.key -sha256 -days 1024 -out rootCA.pem
        
1. 配置文件

    1. `server.csr.cnf`

            [req]
            default_bits=2048
            prompt=no
            default_md=sha256
            distinguished_name=dn

            [dn]
            C=US
            ST=RandomState
            L=RandomCity
            O=RandomOrganization
            OU=RandomOrganizationUnit
            emailAddress=example@email.com
            CN=localhost

    1. `v3.ext`

            
            authorityKeyIdentifier=keyid,issuer
            basicConstraints=CA:FALSE
            keyUsage=digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment
            subjectAltName=@alt_names

            [alt_names]
            DNS.1=localhost

1. 生成 server.key

        openssl req -new -sha256 -nodes -out server.csr -newkey rsa:2048 -keyout server.key -config server.csr.cnf
        
1. 生成 server.csr

        openssl x509 -req -in server.csr -CA rootCA.pem -CAkey rootCA.key -CAcreateserial -out server.crt -days 500 -sha256 -extfile v3.ext
        

### 服务代码使用证书

在服务端代码中使用证书，读取文件`server.key`和`server.csr`。以 node 的 express 为例：

```javascript
const path = require('path');
const fs = require('fs');
const express = require('express');
const https = require('https');

const certOptions = {
  key: fs.readFileSync(path.resolve('../server.key')),
  cert: fs.readFileSync(path.resolve('../server.crt')),
};

const app = express();

const server = https.createServer(certOptions, app).listen(443);
```

### 操作系统信任证书

各个操作系统参考：[How to get HTTPS working in localhost development environment][1]

以 Windows7 为例，与参考文档不用的是，需要加入两个证书文件：`rootCA.pem`和`server.crt`。

- 运行（Win+R） `mmc`

- 文件 > 添加/删除管理单元 > 添加证书 > 本地计算机账号

- 受信任的根证书颁发机构 > 证书 > 所有任务 > 导入，加入 `rootCA.pem`和`server.crt` 

### 验证

访问 `https://localhost`

[0]: https://medium.freecodecamp.org/how-to-get-https-working-on-your-local-development-environment-in-5-minutes-7af615770eec
[1]: https://reactpaths.com/how-to-get-https-working-in-localhost-development-environment-f17de34af046


localhost 启用 https





## AI Desktop agent

- https://github.com/bytebot-ai/bytebot
  
    - https://railway.com/deploy/bytebot?referralCode=L9lKXQ

## Open Source Editor (Cursor Alternative)

Void: https://github.com/voideditor/void

Compile <https://github.com/voideditor/void/blob/main/HOW_TO_CONTRIBUTE.md>


1. Download and build

    ```
    git clone https://github.com/voideditor/void

    npm install

    npm run watch
    npm run watchreact
    ```

2. Run the Editor on Mac

    ```
    ./scripts/code.sh
    ```

3. Reload after changes

    You can press `Ctrl+Shift+P` and `Reload Window`

## Framework

- https://modelcontextprotocol.io/introduction

    https://github.com/punkpeye/awesome-mcp-servers

- https://github.com/google/A2A
- https://github.com/langchain-ai/langchain

## Code Assistant

- Copilot
- Cursor
- Windsurf

- https://github.com/cline/cline
- https://github.com/Aider-AI/aider
- https://github.com/continuedev/continue

## Agentic AI frameworks


- Foundations (Raw Agentic AI)

- OpenAI Agents SDK

- CrewAI (Multi-Agent Collaboration)

- LangGraph (Graph-Based Systems)

- AutoGen + MCP (Conversational Agents)

- OpenAI SDK + MCP (Enterprise Systems)

## Platform 

- https://replit.com

- https://aimlapi.com/app/

- https://www.together.ai/

- https://groq.com/

- https://replicate.com/

- Hugging Face: https://huggingface.co/

  - quicktour: docs/transformers/quicktour

- modal: https://modal.com/

- https://cloud.tencent.com/product/hai

- https://pai.console.aliyun.com

## Website

- Chatbot Arena: 
    - https://chat.lmsys.org/
    - https://huggingface.co/spaces/lmsys/chatbot-arena-leaderboard

- poe: https://poe.com/

  - https://developer.poe.com/server-bots/quick-start

- deepseek: https://chat.deepseek.com/

- Perplexity: https://labs.perplexity.ai/
  - API: https://docs.perplexity.ai/docs/getting-started

## Project

- ollama: https://github.com/ollama/ollama

- FastChat: https://github.com/lm-sys/FastChat

- llama: https://ai.meta.com/llama/

- llama Github: https://github.com/facebookresearch/llama

- llama.cpp Port of Facebook's LLaMA model in C/C++ 

    - https://github.com/ggerganov/llama.cpp

    - Example https://github.com/ggerganov/llama.cpp/blob/master/examples/main/README.md

- llama-gpt 

    - https://github.com/getumbrel/llama-gpt

- whisper.cpp Port of OpenAI's Whisper model in C/C++

    - https://github.com/ggerganov/whisper.cpp
    - Talk.wsam: https://whisper.ggerganov.com/talk/



- Personalizing LLM Responses

    - https://github.com/embedchain/embedchain


## llama.cpp: Run on macOS

```
# use gpu
./main -m ~/Downloads/llama-2-7b-chat.Q4_K_M.gguf --prompt "what is quantum"

# disable Metal gpu
./main -ngl 0  -m ~/Downloads/llama-2-7b-chat.Q4_K_M.gguf --prompt "what is quantum"
```

- llm: https://github.com/rustformers/llm
- ggml: https://github.com/ggerganov/ggml

## Models

Models are usually downloaded from [Hugging Face](https://huggingface.co/models?pipeline_tag=text-generation&sort=downloads)

- https://github.com/oobabooga/text-generation-webui?tab=readme-ov-file#downloading-models
- https://huggingface.co/TheBloke/Llama-2-7B-GGUF
- https://huggingface.co/TheBloke/Llama-2-7B-Chat-GGUF

- https://huggingface.co/meta-llama/Llama-2-7b-chat

## Leaderboard

- https://evalplus.github.io/leaderboard.html

## Serving

- vLLM: https://github.com/vllm-project/vllm
- webui: https://github.com/oobabooga/text-generation-webui

## Check later

- https://www.aliyun.com/solution/tech-solution/calbadm?spm=5176.28508143.J_4VYgf18xNlTAyFFbOuOQe.41.4a0b154ac9jGYT&scm=20140722.M_10058081._.V_1
- ChatGLM, LangChain






- VitePress: https://github.com/vuejs/vitepress
- Docusaurus: https://github.com/facebook/docusaurus 
- mdBook: https://github.com/rust-lang/mdBook
- mkdocs: https://github.com/mkdocs/mkdocs
- docsify: https://github.com/docsifyjs/docsify


https://cdnjs.cloudflare.com/ajax/libs/docsify/4.13.1/docsify.min.js


Markdown to Docs





## 介绍

项目的说明文档是非常重要的。

[Docusaurus](https://docusaurus.io/) 可以快速搭建文档网站，支持 Markdown、基于 React、对翻译友好等。

## 安装使用

参考 <https://docusaurus.io/docs/en/installation>

### 安装

  npm install --global docusaurus-init

  # 在项目下
  docusaurus-init

自动生成文件结构

    root-directory
    ├── docs-examples-from-docusaurus
    │   ├── doc1.md
    │   ├── doc2.md
    │   ├── doc3.md
    │   ├── exampledoc4.md
    │   └── exampledoc5.md
    └── website
        ├── blog-examples-from-docusaurus
        │   ├── 2016-03-11-blog-post.md
        │   ├── 2017-04-10-blog-post-two.md
        │   ├── 2017-09-25-testing-rss.md
        │   ├── 2017-09-26-adding-rss.md
        │   └── 2017-10-24-new-version-1.0.0.md
        ├── core
        │   └── Footer.js
        ├── package.json
        ├── pages
        ├── sidebars.json
        ├── siteConfig.js
        └── static

### 运行

按以下步骤修改运行

1. 重命名 `docs-examples-from-docusaurus` 为 `docs`
1. `cd website`
1. 重命名 `blog-examples-from-docusaurus` 为 `blog`
1. `npm start`
1. 访问 <http://localhost:3000>

### 升级

  npm update docusaurus


Docusaurus: 快速搭建文档网站





## 介绍

Nginx 是服务端软件，可以实现 API 网关、反向代理、微服务和负载均衡等。

## UI

config

- https://nginxui.com

log

- https://goaccess.io

## Firewall

配置好 Nginx 后，可能因为防火墙导致无法访问

使用 UFW (Ubuntu, Debian)
```
ufw allow 'Nginx Full'

# OR
ufw allow 80/tcp
ufw allow 443/tcp
```


## git server: 413 error

```
client_max_body_size 50m;
```
Default: `client_max_body_size 1m;`

<http://nginx.org/en/docs/http/ngx_http_core_module.html#client_max_body_size>

## Limiting Access

可以限制每个 IP 的连接数、请求频率、下载速度等。

[NGINX Docs | Limiting Access to Proxied HTTP Resources](https://docs.nginx.com/nginx/admin-guide/security-controls/controlling-access-proxied-http/)

举例：限制每秒或每分钟的最大请求次数 (1r/s, 60r/m)
```
http {
    #...
    limit_req_zone $binary_remote_addr zone=one:10m rate=1r/s;

    server {
        #...
        location /search/ {
            limit_req zone=one;
            limit_req_status 429;
        }
    }
}
```

## 负载均衡

[Using nginx as HTTP load balance](http://nginx.org/en/docs/http/load_balancing.html)

根据特定算法，将请求转发到多个服务器组成的集群中。以提高性能、可扩展性和可用性。

```
http {
    upstream myapp1 {
        ip_hash;
        server srv1.example.com;
        server srv2.example.com;
        server srv3.example.com;
    }

    server {
        listen 80;

        location / {
            proxy_pass http://myapp1;
        }
    }
}
```

![](/assets/nginx_load-balancing.png)

## 设置访问日志 access_log

```
log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                  '$status $body_bytes_sent "$http_referer" '
                  '"$http_user_agent" "$http_x_forwarded_for"';

access_log  /var/log/nginx/access.log  main;
```

### 查看访问日志

```
tail -f /var/log/nginx/access.log | grep 404
```

## 代理 react 打包后的静态网站，避免子路径 404

    location / {
       try_files $uri /index.html;
    }

## 代理 websocket

需要额外做些配置，以支持 socket 连接

    location / {
        proxy_pass http://localhost:8080;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
    }

## 启动 gzip 压缩

nginx 可以[使用 gzip 压缩响应数据](http://nginx.org/en/docs/http/ngx_http_gzip_module.html)，通过网络传给浏览器解压后使用，可以极大降低传输时间。
  
    gzip on; # 开启
    gzip_types \*; # 默认仅压缩 text/html

## 静态资源（图片等）配置缓存

[Cache-Control 参考](https://www.keycdn.com/support/cache-control/)

    location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
        expires 2d;
        add_header Cache-Control "public, no-transform";
    }

## 重启

    nginx -s reload

## 加载其它配置文件

    include /path/to/*.conf

## 端口转发配置

一般默认访问端口为 http: 80，https: 443。现在需要转到 5001 端口（通常 Web 应用都会有一个自定义的端口）。

`/etc/nginx/nginx/conf`

### 转发到特定端口

```
location / {
    proxy_pass http://127.0.0.1:5001;
}
```

### 先静态文件，然后再到特定端口

    location / {
        root /path/to/static;
        try_files $uri @mysite;

        expires max;
        access_log off;
    }

    location @mysite {
        proxy_pass http://127.0.0.1:5001;
    }

### 不生效解决办法：去掉 root 行

默认配置文件中可能包含了 root ，导致直接打开了 html。需要注释掉这一行以便转发生效。

    # root         /usr/share/nginx/html;


nginx 配置总结




## 介绍

xml/xsl 是相对 html/css 更加一般的数据结构，用于数据存储和展示。

当有文件 a.xml 和 a.xsl 时，在浏览器中直接打开 a.xml 可以看到转换后的内容。
那么，在前端代码中，假设已经有 `xml` 和 `xsl` 两个字符串变量，包含了相应的文件内容。如何转换出对应的 html 字符串呢？

参考文件 [https://github.com/krtnio/angular-xslt/blob/master/src/ng-xslt.js](https://github.com/krtnio/angular-xslt/blob/master/src/ng-xslt.js)。该项目把转换过程包装成了 AngularJS 的一个过滤器, 但转换过程并不复杂，也可以写成纯 JavaScript 函数。

源码针对 IE 和其它浏览器分别作了处理

### IE

使用 ActiveXObject

```javascript
xmlDoc = new ActiveXObject('Msxml2.DOMDocument');
xmlDoc.loadXML(xml);
if (xmlDoc.parseError.errorCode !== 0)
    return ('XML parse error (' + xmlDoc.parseError.errorCode + '): ' + xmlDoc.parseError.reason).trim();

xsltDoc = new ActiveXObject('Msxml2.FreeThreadedDOMDocument');
xsltDoc.loadXML(xslt);
if (xsltDoc.parseError.errorCode !== 0)
    return ('XSLT parse error (' + xsltDoc.parseError.errorCode + '): ' + xsltDoc.parseError.reason).trim();

var template = new ActiveXObject('Msxml2.XSLTemplate');
try {
    template.stylesheet = xsltDoc;
} catch (err) {
    return 'XSLT error: ' + err.message;
}

processor = template.createProcessor();
processor.input = xmlDoc;
processor.transform();

output = processor.output;
```

### 其它浏览器

使用 DOMParser 和 XSLTProcessor

```javascript
var err;

xmlDoc = (new DOMParser()).parseFromString(xml, 'text/xml');
if (err = getParserError(xmlDoc))
    return 'XML parse error: ' + err;

xsltDoc = (new DOMParser()).parseFromString(xslt, 'text/xml');
if (err = getParserError(xsltDoc))
    return 'XSLT parse error: ' + err;

processor = new XSLTProcessor();
processor.importStylesheet(xsltDoc);

output = (new XMLSerializer()).serializeToString(processor.transformToFragment(xmlDoc, document));
```


XML+XSL 转换成 HTML





参考

- [Cross Site Scripting Prevention Cheat Shee](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html)

## 介绍

跨站脚本(Cross-site Scripting)是网页形式的[代码注入](https://en.wikipedia.org/wiki/Code_injection)。会导致页面执行攻击者的代码。

网页经常接收用户的输入。如果未对输入做过滤，输入中包含了恶意代码就可能导致 XSS 攻击。攻击成功后可以获取网页的内容、会话、cookies 等，提升权限绕过同源限制，可能向服务器发送伪造请求。

## 防御措施

防御 XSS 的主要方法

- 对未知来源的字符串输入，做 **编码（encoding）** 或 **转义（escaping）**

- 对字符串输出，做 **过渡（sanitize）**

- 启用 Content Security Policy（CSP），只运行特定域的脚本，忽略任何其它脚本

## 编码或转义方案

### JavaScript

#### 使用安全的字符串序列化方法

服务端使用用户输入来拼接字符串生成模板时，使用安全的字符串序列化（serialize）方法。例如，使用 [devalue](https://github.com/Rich-Harris/devalue) 代替`JSON.stringify`。

错误例子
```javascript
const state = {
  userinput: `</script><script src='https//evil.com/mwahaha.js'>`
};

const template = `
<script>
  // NEVER DO THIS
  var preloaded = ${JSON.stringify(state)};
</script>`;
```

导致后果

```html
<script>
  // NEVER DO THIS
  var preloaded = {"userinput":"</script><script src='https://evil.com/mwahaha.js'>"};
</script>
```

使用`devalue`可以避免这种攻击

```javascript
const template = `
<script>
  var preloaded = ${devalue(state)};
</script>`;
```

```html
<script>
  var preloaded = {userinput:"\\u003C\\u002Fscript\\u003E\\u003Cscript src=\'https:\\u002F\\u002Fevil.com\\u002Fmwahaha.js\'\\u003E"};
</script>
```

#### (0, eval): call `eval` indirectly

当必须使用`eval`来运行字符串内容时，使用间接调用形式`(0, eval)(string)`可以确保在全局环境中运行。避免接触当前作用域的数据。

```javascript
{
    const secret = 'A secret string';

    eval('console.log(secret)');      // A secret string
    (0, eval)('console.log(secret)'); // ReferenceError: secret is not defined
}
```

#### [CSS.escape](https://developer.mozilla.org/en-US/docs/Web/API/CSS/escape)

`CSS.escape(str)`

```javascript
CSS.escape(".foo#bar") // "\.foo\#bar"
CSS.escape("()[]{}")          // "\[\]\{\}"
CSS.escape('--a')             // "--a"
CSS.escape(0)                 // "\30 ", the Unicode code point of '0' is 30
CSS.escape('\0')              // "\ufffd", the Unicode REPLACEMENT CHARACTER
```

### URL

- [URL(or percent) encoding](https://en.wikipedia.org/wiki/Percent-encoding)

- encodeURIComponent()


### HTML

- entity encoding

    [参考](https://stackoverflow.com/a/18750001/5154601)

    ```javascript
    var encodedStr = rawStr.replace(/[\u00A0-\u9999<>\&]/gim, function(i) {
      return '&#'+i.charCodeAt(0)+';';
    });
    ```

- [HTML sanitization](https://en.wikipedia.org/wiki/HTML_sanitization)

### 其它方案

- 框架提供的输入过滤 API

## 参考 

[Cross-site scripting](https://en.wikipedia.org/wiki/Cross-site_scripting)


Yeoman




## 介绍

## YAML 显式声明 kye/value

`?` 后面为 key，`:` 后面为 value

```yaml
? dependencies
: gulp: ^3.9.1
  gulp-clean: ^0.4.0
  gulp-zip: ^4.2.0
```

## 多行数组

[参考](https://stackoverflow.com/questions/23657086/yaml-multi-line-arrays)

```yaml
key:
  - string1
  - string2      
  - string3
  - string4
  - string5
  - string6
```

```yaml
key: ['string1', 'string2', 'string3', 
  'string4', 'string5', 
  'string6']
```

```yaml
-
  name: Jack
  age: 32
-
  name: Claudia
  age: 25
```


YAML tips




## 介绍

平时测试一些代码或功能时只用到一个 html 和一个 js/css 文件。希望能自动重载频繁修改的 js/css 文件。也就是实现单文件的 Hot Module Reload。

## 准备

> 新建一个测试目录，并用 npm 初始化

    npm init

### 安装模块
可能会遇到找不到模块的报错，在全局和当前目录都安装 webpack 和 webpack-dev-server 解决。

由于最新版本有兼容性问题，指定已知可用的版本安装。

    npm install webpack@2.2.1 webpack-dev-server@2.9.1 -g
    npm install webpack@2.2.1
    # npm install  webpack-dev-server@2.9.1
    npm install css-loader style-loader

### 相关文件

准备相关文件：tmp.html, tmp.js, tmp.css

tmp.html: 
```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <div>
    content
  </div>
  <script src="bundle.js"></script>
</body>
</html>
```

tmp.js
```javascript
require('./tmp.css');
console.log('Hello!');
```

tmp.css
```css
div {
  background: green;
}
```

## 运行

当前目录输入命令

    webpack-dev-server ./tmp.js --hot --inline --module-bind "css=style-loader!css-loader"

在浏览器中访问 `http://localhost:8080/tmp.html`。成功后修改 js/css 文件，页面将会自动刷新。

可以整合成一个脚本：
```bash
chrome http://localhost:8080/tmp.html &
webpack-dev-server ./tmp.js --hot --inline --module-bind "css=style-loader!css-loader"
```

## 参考
**注意**，本文中，参考文档的参数需修改为`"css=style-loader!css-loader"`

[webpack hot-module-reload](https://github.com/webpack/docs/wiki/hot-module-replacement-with-webpack)


使用 Webpack 热加载功简单页面（Hot Module Reload）




## 介绍

[Webpack](https://webpack.js.org/guides/getting-started/) 是现代 JavaScript 应用的静态模块打包工具。在处理应用时，通过构建依赖图来生成一个或多个代码包。

## 区别

前端代码中，引用库的方式通常是以`<script>`标签的形式引入全局变量，再在代码中使用该变量。库文件和代码文件是需要分开导入的。

Webpack 支持`import`和`export`等模块化语法，通过依赖关系对所有文件进行打包等处理后生成代码包。从而实现更好的模块化开发方式，并能在这基础上做各种优化。

## 核心概念

[核心概念](https://webpack.js.org/concepts/)

- Entry
- Output
- Loaders
- Plugins
- Mode
- Browser Compatibility

默认配置文件：webpack.config.js

### Entry

`entry`（入口）说明了从哪个文件开始分析依赖图，推断出其它有依赖关系的模块或库。默认为`./src/index.js`。

```javascript
module.exports = {
  entry: './path/to/my/entry/file.js'
}
```

### Output

`output`说明了生成包的位置和命名方式。

```javascript
const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};
```

### Loaders

Webpack 默认支持 JavaScript 文件。其它文件（css，less等）需要`Loaders`来处理和转换成可用的模块组合到依赖关系和包里面。

该配置有两个主要属性：

1. `test`指定了要处理的文件（一般为正则表达式）
1. `use``指定了要使用的 loader

```javascript
const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { 
        test: /\.txt$/, 
        use: 'raw-loader' 
      }
    ]
  }
};
```

> 当 `require() / import`语句遇到`.txt`文件时，使用`raw-loader`转换后再加入包。

### Plugins

`Loaders`用来处理特定类型文件、模块，`plugins`则可以用来处理更大范围内的任务，如包优化、静态资源管理、环境变量导入等。

使用 plugin，需要通过`require`导入，`new`之后加入到`plugins`数组中。

```javascript
const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins

module.exports = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};
```
> `html-webpack-plugin`按模板生成一个自动加入生成包的 HTML 文件。

### Mode

`Mode`选项可以开启对应环境的内置优化方案。

```javascript
module.exports = {
  mode: 'production'    
}
```

## 其它工具

### 打包

[Parcel](https://parceljs.org/)
[Rollup](https://github.com/rollup/rollup)

### 编译转码

[Babel](https://babeljs.io/)
[Buble](https://buble.surge.sh/guide/)



Webpack 核心概念





## public path

[https://webpack.js.org/guides/public-path](https://webpack.js.org/guides/public-path)

### 动态修改

`public-path.js`
```
__webpack_public_path__ = process.env.ASSET_PATH
```

入门文件 `index.js`
```
import './public-path'
```


## 使用 [require.context](https://github.com/webpack/docs/wiki/context#requirecontext) 动态加载模块

`require.context`可以列出特定目录下匹配的文件，并返回一个加载对象。使用该对象加载对应文件即可。

```
+ template/
    |- table.jade
    |- table-row.jade
    |+ directory/
        |-folder.jade
```

```javascript
const req = require.context("./templates", true, /^\.\/.*\.jade$/);

const tableTemplate = req("./table.jade");
// tableTemplate === require("./templates/table.jade");

const tableTemplateId = req.resolve("./table.jade");
// tableTemplateId === require.resolve("./templates/table.jade");

req.keys();
// is ["./table.jade", "./table-row.jade", "./directory/folder.jade"]

req.id;
// is i. e. 42
```

## Loader, Plugin

- [Loader](https://webpack.js.org/contribute/writing-a-loader/) 用来对特定的资源文件进行内容转换。

        `webpack.config.js`

        ```javascript
        module: {
            rules: [
                {
                    test: /\.css$/,
                    use: [
                        {
                            loader: path.resolve('./src/utils/style-loader'),
                            options: {}
                        }
                    ]
                }
            ]
        }
        ```

        `./src/utils/style-loader`

        ```javascript
        const { px2rem } = require('css-convert');

        module.exports = function (source) {
            return px2rem(source, { rem: 16, dpr: 2 });
        }
        ```

- [Plugin](https://webpack.js.org/contribute/writing-a-plugin/) 可以让开发者使用 webpack 全部的功能。相对 loader 更复杂也更强大。

## CSS Module 通过 scope 保留全局样式

通常情况下，开启 CSS Module 后，导入的样式类名会附加随机后缀，实现本地化。有些情况下，需要保持类名不变，以修改全局的样式。

这时可以使用 [scope](https://github.com/webpack-contrib/css-loader#scope) 的`:global`选择器

```css
:global .btn {
        color: green;
}
```

## LESS import 使用 webpack alias

需要在最前面添加波浪号`~`

```less
@import '~@/utils/base.less';
```

## 导出子模块

有时候需要在`index.js`中集中导出子模块，如果先`import`后 `export`，会报错`unexpected token`。需要直接`export from`。

```javascript
export Card from './Card';

// or
export { default as Card } from './Card';
```

## Webpack 加速

[Webpack 2s 完成构建](https://medium.com/ottofellercom/0-100-in-two-seconds-speed-up-webpack-465de691ed4a)

- [HardSourcePlugin](https://github.com/mzgoddard/hard-source-webpack-plugin) 充分利用缓存，后续启动加速效果明显

## 动态加载目录中的所有文件

[参考](https://stackoverflow.com/questions/42118296/dynamically-import-images-from-a-directory-using-webpack/42118728)

在 ES6 中，import 和 export 都是静态加载。而 webpack 的 [require.context](https://webpack.js.org/guides/dependency-management/#require-context) 可以实现构建过程中的动态加载：

```javascript
fucntion importAll(r) {
    return r.keys().map(r);
}

const images = importAll(require.context('./', false, /\.(png|jpe?g|svg)$/));
```

## DefinePlugin 创建全局常量

### 说明

在编译时在前端代码中创建全局常量。适用于在开发和生产模式下实现不同行为，如日志打印、设置不同 URL、启用不同特性等。

```javascript
new webpack.DefinePlugin({
        // Definitions
})
```

定义是一些键值对，遵循规则：

- 值是字符串，作为代码片段直接使用
- 值是非字符串，先字符串化
- 值是对象，内部的键按相同的方式定义
- 键前缀`typeof`，仅当调用`typeof`时定义生效

### 举例

webpack 配置

```javascript
new webpack.DefinePlugin({
    PRODUCTION: JSON.stringify(true),
    VERSION: JSON.stringify('5fa3b9'),
    BROWSER_SUPPORTS_HTML5: true,
    TWO: '1+1',
    'typeof window': JSON.stringify('object'),
    'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV)
    }
});
```

前端代码使用

```javascript
console.log('Running App version ' + VERSION);
if(!BROWSER_SUPPORTS_HTML5) require('html5shiv');
```


Webpack tips





## 介绍

做网站性能和功能测试时，借助一些好的工具可以方便很多。

## 在线测试分析

[PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/)

## 命令行工具

### loadtest

[loadtest](https://github.com/alexfernandez/loadtest) 对 URL 进行负载测试

用法：

    loadtest [-n requests] [-c concurrency] URL

-n 请求数

-c 并发数

### wrk

[wrk](https://github.com/wg/wrk) 利用多线程进行 HTTP 基准测试

> 要求 Linux 系统，且需要编译源码

用法

    wrk -t12 -c400 -d30s http://127.0.0.1:8080/index.html

-c 总的打开的连接数

-t 线程数，每个线程的连接数 = c/t


-d 持续时间


网站测试





## 介绍

WebView 允许将 Web 内容（网址或本地 HTML 页面）作为应用的一部分展示。但相较于浏览器会缺失一部分功能。


WebView 使用介绍（Android）

Names of the week and month





## 介绍

[微信小程序简介](https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/#%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AE%80%E4%BB%8B)

小程序是为了在微信中更方便地使用网页功能而推出的系统。相对普通网页做了很多优化。

对于开发者而言，主要语言仍是 JavaScript。但开发流程和工具有所不同。

### 微信开发-文档

- [微信公众平台](https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Overview.html)

- [小程序开发文档](https://developers.weixin.qq.com/miniprogram/dev/framework/)

- [简易教程](https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/)

## 如何开始

开发流程和普通网站开发大同小异。

### 搭建环境

下载 [小程序开发工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)、注册账号获取 AppID

> 使用小程序调试工具，开发者可以完成 API 和页面的开发调试、代码查看和编辑、小程序预览和发布等功能

### 项目结构


类似于普通 WEB 项目，包含了配置、视图（样式、模板）和逻辑（脚本）文件。支持自定义组件。

> JSON 配置
> 
> WXML 模板 -> XML/HTML
> 
> WXSS 样式 -> CSS
> 
> JavaScript 逻辑交互

### 小程序支付

[支付开发文档](https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_10&index=1#)

### 云函数

#### 调试

修改云函数后, 本地调试需要启用

Devtool > EXPLORER > `quickstartFunctions` > 右键 Start Local Debug > 选择环境

线上调试需要启用

Devtool > EXPLORER > `quickstartFunctions` > 右键 Upload

## 相关框架

自由使用开发工具，但需使用小程序开发工具预览

### 官方框架

[官方框架](https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.html)：响应的数据绑定，页面管理，基础组件，丰富的 API

### 其它框架

[wepy](https://github.com/Tencent/wepy)：类 Vue 开发风格组件化开发

[mpvue](https://github.com/Meituan-Dianping/mpvue)：基于 Vue.js

[taro](https://github.com/NervJS/taro)：支持 React 开发方式的多端统一开发框架

[uni app](https://github.com/dcloudio/uni-app)：支持 Vue 开发方式的多端统一开发框架




微信小程序开发入门




## 介绍 

将 XML 字符串转换成 JavaScript 对象，有哪些方法呢？

- xml2js 库

- 手动转换

## xml2js

[xml2js](https://github.com/Leonidas-from-XIV/node-xml2js) 支持 xml 和 js object 的双向转换。

## 【手动】XML string to XML doc

[参考](https://www.w3schools.com/xml/dom_intro.asp)

```javascript
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(text, "text/xml");
```

## 【手动】XML doc to JavaScript object

[参考](https://davidwalsh.name/convert-xml-json)

### 转换函数

```javascript
// Changes XML to JSON
function xmlToJSON(xml) {
	
	// Create the return object
	var obj = {};

	if (xml.nodeType == 1) { // element
		// do attributes
		if (xml.attributes.length > 0) {
		obj["@attributes"] = {};
			for (var j = 0; j < xml.attributes.length; j++) {
				var attribute = xml.attributes.item(j);
				obj["@attributes"][attribute.nodeName] = attribute.nodeValue;
			}
		}
	} else if (xml.nodeType == 3) { // text
		obj = xml.nodeValue;
	}

	// do children
	if (xml.hasChildNodes()) {
		for(var i = 0; i < xml.childNodes.length; i++) {
			var item = xml.childNodes.item(i);
			var nodeName = item.nodeName;
			if (typeof(obj[nodeName]) == "undefined") {
				obj[nodeName] = xmlToJson(item);
			} else {
				if (typeof(obj[nodeName].push) == "undefined") {
					var old = obj[nodeName];
					obj[nodeName] = [];
					obj[nodeName].push(old);
				}
				obj[nodeName].push(xmlToJson(item));
			}
		}
	}
	return obj;
};
```

### 举例

XML: 
```xml
<ALEXA VER="0.9" URL="davidwalsh.name/" HOME="0" AID="=">
	<SD TITLE="A" FLAGS="" HOST="davidwalsh.name">
		<TITLE TEXT="David Walsh Blog :: PHP, MySQL, CSS, Javascript, MooTools, and Everything Else"/>
		<LINKSIN NUM="1102"/>
		<SPEED TEXT="1421" PCT="51"/>
	</SD>
	<SD>
		<POPULARITY URL="davidwalsh.name/" TEXT="7131"/>
		<REACH RANK="5952"/>
		<RANK DELTA="-1648"/>
	</SD>
</ALEXA>
```

JavaScript object: 
```javascript
{
    "@attributes": {
        AID: "=",
        HOME: 0,
        URL: "davidwalsh.name/",
        VER: "0.9",
    },
    SD: [{
        "@attributes": {
            FLAGS: "",
            HOST: "davidwalsh.name",
            TITLE: A
        },
        LINKSIN: {
            "@attributes": {
                NUM: 1102
            }
        },
        SPEED: {
            "@attributes": {
                PCT: 51,
                TEXT: 1421
            }
        },
        TITLE: {
            "@attributes": {
                TEXT: "David Walsh Blog :: PHP, MySQL, CSS, Javascript, MooTools, and Everything Else",
            }
        },
    }, {
        POPULARITY: {
            "@attributes": {
                TEXT: 7131,
                URL: "davidwalsh.name/"
            }
        },
        RANK: {
            "@attributes": {
                DELTA: "-1648"
            }
        },
        REACH: {
            "@attributes": {
                RANK = 5952
            }
        }
    }]
}


```

## JavaScript object to JSON string

```javascript
var jsonText = JSON.stringify(xmlToJSON(xmlDoc))
```


XML 字符串解析和格式转换





## 介绍

[Workbox](https://developers.google.com/web/tools/workbox) 是一系列库和 Node 模块。用于缓存资源和构建 [Progressive Web Apps](https://developers.google.com/web/progressive-web-apps/)(PWA)。

PWA 应用的用户体验能达到较高的水平

- Reliable 不管网络环境如何都能立即加载

- Fast 用户交互时能立即响应

- Engaging 像原生应用一样的体验

## Why Workbox

- 预缓存 Precaching
- 运行时缓存 Runtime caching
- 策略 Strategies
- 请求路由 Request routing
- 后台同步 Background sync
- 方便调试 Helpful debugging

## 使用

Workbox 可以和 service worker 一起使用。[Get Started](https://developers.google.com/web/tools/workbox/guides/get-started)

### 注册 service worker

service-worker.js
```javascript
console.log('Hello from service-worker.js');
```

index.html
```html
<script>
// Check that service workers are supported
if ('serviceWorker' in navigator) {
  // Use the window load event to keep the page load performant
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js');
  });
}
</script>
```

可以在 Chrome 开发工具的 `Application > Service Workers` 查看。建议选中`Update on Reload` 便于后续的开发。

### 加载 Workbox

#### 直接使用

service-worker.js
```javascript
importScripts('https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js');

// or download to local
importScripts('./4.3.1/workbox-sw.js');

if (workbox) {
  console.log(`Yay! Workbox is loaded 🎉`);
} else {
  console.log(`Boo! Workbox didn't load 😬`);
}
```


#### 使用打包工具

比如使用 npm 安装, webpack 打包生成 service-worker.js

```javascript
import {precaching} from 'workbox-precaching'
import {registerRoute} from 'workbox-routing'
import {BackgroundSyncPlugin} from 'workbox-background-sync'

// Use the above modules somehow
```

### 路由处理, 缓存 JavaScript 请求

可以对指定的路由添加缓存策略。

service-worker.js
```javascript
workbox.routing.registerRoute(
  /\.js$/,
  new workbox.strategies.NetworkFirst()
);
```

### 路由处理，缓存 CSS、Images 等请求

service-worker.js
```javascript
workbox.routing.registerRoute(
  // Cache CSS files.
  /\.css$/,
  // Use cache but update in the background.
  new workbox.strategies.StaleWhileRevalidate({
    // Use a custom cache name.
    cacheName: 'css-cache',
  })
);

workbox.routing.registerRoute(
  // Cache image files.
  /\.(?:png|jpg|jpeg|svg|gif)$/,
  // Use the cache if it's available.
  new workbox.strategies.CacheFirst({
    // Use a custom cache name.
    cacheName: 'image-cache',
    plugins: [
      new workbox.expiration.Plugin({
        // Cache only 20 images.
        maxEntries: 20,
        // Cache for a maximum of a week.
        maxAgeSeconds: 7 * 24 * 60 * 60,
      })
    ],
  })
);
```

缓存机制应用于同域名下的文件，可在 `Appliction > Cache Storage` 中查看。


### 预缓存文件 / Precache Files 

在安装 serviceWorker 之前提前下载和缓存相关文件，便于离线使用和加速。

```javascript
workbox.precaching.precacheAndRoute([
    '/styles/index.0c9a31.css',
    '/scripts/main.0d5770.js',
    { url: '/index.html', revision: '383676' },
]);
```

Webpack 构建环境可以参考：[Precache Files with Webpack](https://developers.google.com/web/tools/workbox/guides/precache-files/webpack)


Workbox 介绍





以 Jenkins 服务为例，命令行输入启动命令

    net start Jenkins

停止命令

    net stop Jenkins


Windows 启动服务




## 列表

- Autohotkey

- WindowTabs

- Launchy

- Cmder

- Path Manager

- [clink](/article/clink.md)


Windows 提高效率工具介绍




## Outlook recall messages

- 双击已发送邮件，打开`Message`窗口

- `Move` -> `Actions`下拉框，选择 `Recall This Message...`

若对方未查看邮件，可以成功撤回。否则，会失败。

## 连接无线网络，显示无 Internet 访问 或 无网络访问权限
可能是使用了之前遗留的错误的 IP 地址，导致无法连接。可以通过重复设置 IP 地址来刷新。

### 查看
- 网络和共享中心 > 无线网络连接 > 详细信息，关注 `IPv4 地址`，`IPv4 默认网关`

- 命令行输入`route print -4`，查看IPv4 路由表中的`网关`和`接口`等信息是否与上一步一致

### 恢复步骤
- 网络和共享中心 > 无线网络连接 > 属性 > Internet 协议版本 4 （TCP/IPv4） > 属性 

- 选中`使用下面的 IP 地址`，输入相应格式的任意内容
- 选中`使用下面的 DNS 服务器地址`，输入相应格式的任意内容
- 确定

- 选中`自动获得 IP 地址`
- 选中`自动获得 DNS 服务器地址`
- 确定

无线网络会尝试重新自动获得正确的 IP 和 DNS 服务器地址。

## Visual Basic Script

`tmp.vbs`
```
msgbox "Hello, world"
```

```
wscript tmp.vbs
```

## Windows 修改字体大小

当使用分辨率较高的显示器后，字体会显得比较小。可以使用一下方式调大系统字体

`控制面板>外观和个性化>显示`

- 修改分辨率
- 设置自定义文本大小（DPI）

或者单独设置应用程序的字体，如编辑器、终端、浏览器等都有字体设置。

## Windows 启用 ssh 服务

- Download [OpenSSH](https://github.com/PowerShell/Win32-OpenSSH/releases)

- Install `sshd`, `ssh-agent` services

    powershell.exe -ExecutionPolicy Bypass -File install-sshd.ps1

- Open `Services`, start `OpenSSH SSH server` service

> Go to Control Panel > System and Security > Administrative Tools and open Services.


## 复制到剪贴板

    dir | clip

## 网络端口使用情况

    netstat -abno | grep 35729 -A 1

    netstat -abno | grep node -B 1

### 使用 TCPView
[TCPView](https://download.sysinternals.com/files/TCPView.zip)

## 自动关机

300 秒后自动关机

    shutdown /s /t 300

取消
    shutdown /a

## 大图片分页打印

[参考](https://robservatory.com/span-one-large-image-across-multiple-printed-pages/)

- 打开 Excel 空白工作簿
- 菜单栏 `插入 > 图片`， 选择要打印的大图
- 对图片进行适当缩放后，即可打印

## mklink: 创建目录链接

    mklink /J newLink oldPath 

## 删除链接

    del 
    rmdir

## refreshenv: 刷新当前 cmd 的环境变量（Chocolatey）

在窗口外修改环境变量后，一般新开一个窗口才会生效。Chocolatey 提供命令能直接刷新环境变量。

    refreshenv

## ls 等 bash 命令在 cmd 环境中文乱码问题

解决方案：设置语言和编码

    set LANG=zh_CN.utf8

## 创建符号链接

    mklink Link Target

为 Target 创建符号链接 Link。

可选参数：`/D`，目录，默认为文件。`/H`，创建硬链接，默认是符号链接。

## 重置网站 DNS 后获取不到IP

将个人网站的 DNS 服务器从 A 改成 B, 又改回 A。发现本地已经无法获取网站的 IP。而使用命令

    ipconfig /flushdns

无效，手机端可以正常访问。应该是本地的无线网络连接中的 DNS 配置引起的。

最后的解决方案：

    网络和共享中心 - 更改适配器设置 - 无限网络连接 - 右键属性、选中 IPv4、属性、选择自动获得 DNS 服务器地址、确定

## DOSKEY 实现 alias 快捷键

    DOSKEY v=gvim $*

使用：

    $ v tmp.txt

> 与其它命令冲突时，会报错：键盘历史记录实用程序已停止工作

## tracert

    tracert www.example.com

追踪路由 ip

## cmd 脚本参数

    $0: 脚本名
    $1: 第一个参数
    $n: 第n个参数

    $*: 所有参数

## `cd %~dp0` 的含义

更改当前目录为脚本所在的目录

其中 `%0` 代表脚本名，`d`代表分区，`p`代表路径


Windows tips





window 对象上有一些全局事件，会在页面加载和卸载的特定阶段触发。

## [DOMContentLoaded](https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event)

- 触发条件：初始 HTML document 完全加载和解析，不包括样式、图片和 subframes 等资源
- 触发对象：window 或 document

同步的 JavaScript 会阻塞 DOM 的解析。样式虽然是异步加载，但也会占用一定的流量，从而拖慢页面加载。

可以通过异步加载 JavaScript 和优化样式加载来提升页面加载速度。

```javascript
document.addEventListener('DOMContentLoaded', function (event) {
  console.log('DOM fully loaded and parsed.')
})

// The synchronous script is going to delay parsing of the DOM,
// so the DOMContentLoaded event is going to launch later.
for (let i = 0; i < 1000000000; i++) {
}
```

## [load](https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event)

- 触发条件：整个页面完全加载和解析，包括样式和图片等资源
- 触发对象：window


```javascript
window.addEventListener('load', function (event) {
  console.log('Page is fully loaded.')
})
```

`load`总是在`DOMContentLoaded`之后触发

## [document.readyState](https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState)

描述了页面的加载状态。当值变化时，`readystatechange`事件会触发。

- loading

    The document is loading

- interactive

    The document has finished laoding and has been parsed. But sub-resources such as images, stylesheets and frames are still loading.

- complete

    The document and all sub-resources have finished loading. The `load` event is about to fire


```javascript
document.addEventListener('DOMContentLoaded', function (event) {
  console.log('DOM fully loaded and parsed.')
})

console.log(`readystate: ${document.readyState}`)
document.addEventListener('readystatechange', function (event) {
  console.log(`readystate: ${document.readyState}`)
})

window.addEventListener('load', function (event) {
  console.log('Page is fully loaded.')
})

// readystate: loading
// readystate: interactive
// DOM fully loaded and parsed.
// readystate: complete
// Page is fully loaded.
```

## Others
- beforeunload
- unload


Window/document events





[Yeoman](http://yeoman.io)

## yeoman 生成器

生成器是一套代码模板，可以通过命令在目录中自动生成代码

## MEAN 框架的自动生成增删查改模块

    yo meanjs:crud-module <module-name>

## react-starter-kit 框架自动生成 component 基本文件

    yo com <component-name>

参考教程：[自定义生成器](http://yeoman.io/authoring/)

`generator-com/app/templates/`包含了用来替换的模板文件

`generator-com/app/index.js`

```javascript
'use strict';

var generators = require('yeoman-generator');

module.exports = generators.Base.extend({
    constructor: function () {
        generators.Base.apply(this, arguments);

        this.argument('name', {
            desc: 'component name',
            type: String, 
            required: true, 
        })

        this.name = arguments[0][0];
    },

    writing: function () {
        var path = 'src/components/' + this.name;
        this.mkdir(path);

        this.template('_index.css', path + '/' + this.name + '.css');
        this.template('_index.js', path + '/' + this.name + '.js');
        this.template('_package.json', path + '/package.json');
    }
});
```


Yeoman（老版本）





## Spell checker

See `:h spell`

```
setlocal spell spelllang=en_us
```

## Get lines from any buffer, including hidden buffers

```
getbufline({buf}, {lnum} [, {end}])
```

## Show multiple lines message and wait for user press <enter>

`:{count}messages`

```
for error in output
  echom error
endfor
redraw
execute len(output).'messages'
```

## neovim lua config

<https://www.notonlycode.org/neovim-lua-config/>

## Fix <Esc> delay in terminal

```
set timeout timeoutlen=3000 ttimeoutlen=10
```

## Filter Vim command output

```
redir => a
any command
redir end
```
In any buffer, in INSERT mode, type <kbd>`<c-r>`=a</kbd>

Or

```
filter /pattern/ command
```

## MacVim: Fix padding at bottom when maximized

Run `defaults write ...` with proper value in terminal. Run `defaults delete ...` to recover.

```
defaults write org.vim.MacVim MMTextInsetTop 3
defaults write org.vim.MacVim MMTextInsetBottom 18
```

## Warning: Input is not from a terminal

```
# From
git tag | vim

# to
git tag | vim -
```

## debug function

```vim
verbase function function-name
```

## sub-replace-expression

When the substitute string starts with "\=" the remainder is interpreted as an expression.

```vim
%s/^/\=line('.')/
```

## Algin text after `:`

```
abc: 1,
b: 2345,

->

abc: 1,
b:   2345,
```
Use <https://github.com/godlygeek/tabular>

```vim
'<,'>Tabularize /:\s*\zs\S.*
```

## Read cmd output

```vim
:read !pwd

pwd | vim
```

## Use neovim from vim

Add `~/.config/nvim/init.vim`

```vim
set runtimepath^=~/.vim runtimepath+=~/.vim/after
let &packpath = &runtimepath
source ~/.vimrc
```

## Buffers

`:buffers[!] [flags]` where `[flags]` restricts the buffers to be listed. For example

```vim
" Show all active buffers
buffers! a

" Show regular active buffers
buffers a

" Show special(unlisted) active buffers
buffers au
```

You can also `:filter` buffers by displayed buffer name

```vim
filter /\.vim/ buffers a
```

Also `getbufinfo()`

```vim
for buf in getbufinfo()
  echom buf.bufnr.': '.buf.name
endfor
```

## `sudo vim` got incorrect config

Use `sudoedit` instead of `sudo vim`

## Command completion menu

```vim
set wildmenu
set wildmode
```

## syntax sync

当文件较大时，`syntax sync` 定义了翻页滚动时刷新语法高亮的机制。否则有时候会出现空白语法高亮。

### 参考

- `h syn-sync`
- https://vim.fandom.com/wiki/Fix_syntax_highlighting](https://vim.fandom.com/wiki/Fix_syntax_highlighting

### 查看和清除
```vim
" 查看
syntax sync

" 清除
syntax sync clear
```

### sync 机制

不同的机制在性能和可靠性方便有所不同

- 从头开始高亮

    ```vim
    syntax sync fromstart
    ```

- 从注释开始高亮

    ```vim
    syntax sync ccoment javaScriptComment
    ```

- 基于模式匹配

    `syntax sync match <syncName> groupthere <name> <pattern>`

        - `syncName` 语法名，可以任意
        - `name`, `pattern` 为开始同步位置的语法名和匹配模式

            ```vim
            syntax sync match htmlHighlight groupthere NONE "<[/a-zA-Z]"
            syntax sync match htmlHighlight groupthere javaScript "<script"
            syntax sync match htmlHighlightSkip "^.*['\"].*$"
            ```

- 控制同步行数

    ```
    syntax sync minlines=10
    syntax sync maxlines=200
    ```

## 使用外部命令来缩进、格式化代码

- equalprg 

    for `=`

    ```vim
    setlocal equalprg=prettier\ --parser\ typescript
    setlocal equalprg=prettier\ --parser\ vue
    ```

- formatprg 

    for `gq`

## Timer

- `timer_start({time}, {callback}[, {options}])`
- `timer_stop({timer})`
- `timer_stopall()`

```vim
function! MyOtherFunction(id)
  echom a:id
endfunction
call timer_start(1000,  'MyFunction')
```

```vim
function! MyOtherFunction(arg, id)
  echom a:arg
endfunction

call timer_start(1000, function('MyOtherFunction', [arg]))
```

## Events

[Scripting the Vim editor, Part 5: Event-driven scripting and automation](https://developer.ibm.com/tutorials/l-vim-script-5/)

### Event sequence in a simple Vim editing session

```txt
> vim
    BufWinEnter     (create a default window)
    BufEnter        (create a default buffer)
    VimEnter        (start the Vim session)

:edit example.txt
    BufNew          (create a new buffer to contain demo.txt)
    BufAdd          (add that new buffer to the session's buffer list)
    BufLeave        (exit the default buffer)
    BufWinLeave     (exit the default window)
    BufUnload       (remove the default buffer from the buffer list)
    BufDelete       (deallocate the default buffer)
    BufReadCmd      (read the contexts of demo.txt into the new buffer)
    BufEnter        (activate the new buffer)
    BufWinEnter     (activate the new buffer's window)

i
    InsertEnter     (swap into Insert mode)

Hello
    CursorMovedI    (insert a character)
    CursorMovedI    (insert a character)
    CursorMovedI    (insert a character)
    CursorMovedI    (insert a character)
    CursorMovedI    (insert a character)

<ESC>
    InsertLeave     (swap back to Normal mode)

:wq
    BufWriteCmd     (save the buffer contents back to disk)
    BufWinLeave     (exit the buffer's window)
    BufUnload       (remove the buffer from the buffer list)
    VimLeavePre     (get ready to quit Vim)
    VimLeave        (quit Vim)
```

### Autocmd

#### 手动触发事件
```vim
doautocmd {event} [fname]

doautoall {event} [fname]
```

#### 单个命令忽略事件
```
noautocmd w fname.gz
```

## Print file

### hardcopy

```vim
hardcopy
```

#### PSUtils

PSUtils: http://knackered.org/angus/psutils

```
curl ftp://ftp.knackered.org/pub/psutils/psutils.tar.gz
tar -xzf psutils.tar.gz
cd psutils
cp Makefile.unix Makefile
# Alter required paths in Makefile 
make
sudo make install
```

#### 手动双面打印的例子

```vim
hardcopy > test.ps
psselect -o test.ps odd.ps
psselect -e test.ps even.ps
```

先打印 odd.ps，把打了单面的纸放回去再打印 even.ps。注意方向和正反面。可能需要旋转 180 度。

### TOhtml

```vim
Tohtml
```
浏览器打开生成的文件，调用打印功能

## Vanilla vim
Useful for debug. Start without any plugins or settings
```
vim -u NONE
```

## setf type
与`set filetype=type`不同，`setf type` 可以避免重复设置类型，进而避免触发多次加载。

## Jump to last position when reopening file

```vim
autocmd BufReadPost *
  \ if line("'\"") >= 1 && line("'\"") <= line("$") && &ft !~# 'commit'
  \ |   exe "normal! g`\""
  \ | endif
```

## GVim guifont

```vim
if has("gui_running")
    if has("gui_gtk2")
        set guifont=Inconsolata\ 12
    elseif has("gui_macvim")
        set guifont=Menlo\ Regular:h14
    elseif has("gui_win32")
        set guifont=Consolas:h11:cANSI
    endif
endif
```

[windows - set gvim font in .vimrc file - Stack Overflow](https://stackoverflow.com/questions/3316244/set-gvim-font-in-vimrc-file)

## copy/paste in terminal vim

```vim
set clipboard=unnamedplus
```

## save with sudo

	:w !sudo tee %

## ^@ 符号

通过`system`运行外部命令并在 vim 中展示输出时，换行符会显示成`^@`。可以当成`\n`来替换。

```vim
let ouput = substitute(oupu, '\n', '', 'g')
```

## 嵌套语法高亮

可以使用 `matchgroup` 和 `contains` 关键字。注意，`matchgroup` 需要写在前面。

```vim
:sy region par1 matchgroup=par1 start=/(/ end=/)/ contains=par2
:sy region par2 matchgroup=par2 start=/(/ end=/)/ contains=par3 contained
:sy region par3 matchgroup=par3 start=/(/ end=/)/ contains=par1 contained
:hi par1 ctermfg=red guifg=red
:hi par2 ctermfg=blue guifg=blue
:hi par3 ctermfg=darkgreen guifg=darkgreen
```

## 查看加载脚本的位置

[参考](https://stackoverflow.com/questions/4976776/how-to-get-path-to-the-current-vimscript-being-executed)

```vim
" Relative path of script file:
let s:path = expand('<sfile>')

" Absolute path of script file:
let s:path = expand('<sfile>:p')

" Absolute path of script file with symbolic links resolved:
let s:path = resolve(expand('<sfile>:p'))

" Folder in which script resides: (not safe for symlinks)
let s:path = expand('<sfile>:p:h')

" If you're using a symlink to your script, but your resources are in
" the same directory as the actual script, you'll need to do this:
"   1: Get the absolute path of the script
"   2: Resolve all symbolic links
"   3: Get the folder of the resolved absolute file
let s:path = fnamemodify(resolve(expand('<sfile>:p')), ':h')
```

## Boolean

Boolean 运算会先把变量转换成 Number。

- Number

    `非0`为 True，`0` 为 False。

    返回值为 Boolean 时，True 返回 `1`，False 返回 `0`。

- String

    字符串先转换成数字。字符串以`非0`数字位开头时，为 True，否则为 False。

    "8foo"  -> True
    "foo"   -> False
    "0"     -> False
    "0xf1"  -> True

## Number、String 互相转换

### Number to String

转换成数字在 ASCII 中对应的表示

    Number 123      --> String "123"
    Number 0        --> String "0"
    Number -1       --> String "-1"

### String to Number

取字符串第一位转换成对应的数字。如果第一位不是数字，则为 0。支持二进制`"0b10"`、八进制`"017"`和十六进制`"0xf9"`。

	String "456"	-->	Number 456
	String "6bar"	-->	Number 6
	String "foo"	-->	Number 0
	String "0xf1"	-->	Number 241
	String "0100"	-->	Number 64
	String "0b101"	-->	Number 5
	String "-8"	    -->	Number -8
	String "+8"	    -->	Number 0

## syntax priority / order

PRIORITY						*:syn-priority*

When several syntax items may match, these rules are used:

1. When multiple Match or Region items start in the same position, the item
                                                                                                                                 defined last has priority.
2. A Keyword has priority over Match and Region items.
3. An item that starts in an earlier position has priority over items that
                                                                                                                                 start in later positions.


## keepend 和 extend 实现嵌套语法高亮

混合使用 keepend 和 extend，可以实现嵌套的语法高亮。例如

    :syn region xmlFold start="<a>" end="</a>" keepend extend

`keepend`保证了语法高亮不会超出匹配的范围之外。`extend`保证嵌套使用时，`</a>`仅仅会关闭对应的`<a>`。

    :h syn-extend

## 仅在 INSERT 模式启用输入法

    set noimdisable

MacVim 需要取消 `Preferences / Advanced` 的 `Draw marked text inline`。

## Jump-motions / changelist

Jump: ||c-o||, ||c-i||

Changes: ||g;||, ||g,||

## Speeds up / 加速

[Refs](https://superuser.com/questions/402448/vim-configuration-slow-in-terminal-iterm2-but-not-in-macvim)

```vim
let loaded_matchparen=1 " Don't load matchit.vim (paren/bracket matching)
set noshowmatch         " Don't match parentheses/brackets
set nocursorline        " Don't paint cursor line
set nocursorcolumn      " Don't paint cursor column
set lazyredraw          " Wait to redraw
set scrolljump=8        " Scroll 8 lines at a time at bottom/top
let html_no_rendering=1 " Don't render italic, bold, links in HTML
```

Also see `:help slow-terminal`

## 显示 vim function 相关信息

    :verb function MyFunction

## 测试脚本

vim 可以自动化读取文件和运行命令。

```bash
vim -es -u vimrc.vim -S cmds.vim test.vue

-e			    Ex mode (like "ex")
-s			    Silent (batch) mode (only for "ex")
-u <vimrc>		Use <vimrc> instead of any .vimrc
-S <session>	Source file <session> after loading the first file
```

## save and edit

另存文件，编辑原文件

    :w filename

另存文件，编辑新文件

    :sav filename

## vim-lsp

- [LSP(Language Server Protocal)](https://github.com/Microsoft/language-server-protocol): 以服务器的形式提供代码相关辅助功能。

- [vim-lsp](https://github.com/prabirshrestha/vim-lsp): 异步 LSP 插件

## 使用本地编辑器编辑远程文件

    gvim scp://username@host[:port]//path/to/file

## 使用 modeline 自动设置文件的配置

在文件末尾添加。一般以注释加空格开头：

    " vi:noai:sw=3 ts=6
    " vim: tw=77

## 根据字符串获取和调用函数

    :h function(

```vim
let func_name = 'MyFunc'
call function(func_name)(arg1, arg2)
```

## 清除语法高亮

某些文件开启语法高亮后导致卡慢，可以关闭当前 buffer 的语法高亮

    syntax clear

关闭所有 buffer 的语法高亮

    syntax off

## 函数参数数目不定

```vim
" a:0
" number of optional arguments
"
" a:1, a:2
" the optional arguments
function FunctionName(foo, ...)
    echo a:0
    echo a:1
endfunction
```

## 重定向 messages 到寄存器

[参考](https://stackoverflow.com/questions/41663646/how-to-copy-to-clipboard-3-last-lines-from-messages)

需要粘贴 messages 内容，但又无法直接复制，可以重定向到寄存器后粘贴出来

```vim
redir @*
messages
redir END
```

## Clear messages

```vim
messages clear
```

## 输入特殊字符

vim 可以输入特殊字符，如希腊字母，数学符号等

Command mode 查看字符定义

    digraphs

Insert mode 输入

    <ctrl>kG*

## imap 表达式

imap 可以映射成表达式，使用函数根据不同情况返回不同值

```vim
h <expr>

inoremap <expr> . InsertDot()
```

## 查看文本对应的 ASCII/Unicode 值

```vim
normal mode: `ga`

command mode: `:as`/`:ascii`
```

## 查看 vim 帮助

    vim -h

## vim 打开慢，性能分析

可以打印时间戳，找出慢的地方

```vim
echom strftime("%X %d %b %Y")
```

### 查看加载的脚本和顺序

```
scriptnames
```

### 语法高亮时间

    :h syntime

### 性能分析

    :h profile


### 记录 vim 启动时间信息到 `vim.log`

    vim --startuptime vim.log

### 过多或重复的 autocmds

通过`au`查看所有定义的 autocmds。例如，输入

    au CursorMoved

使用`augroud`和`autocmd!`可以避免重复定义

## 命令模式快速移动

在命令界面，按 words 移动

    <S-Right>
    <S-Left>

按 Words 移动

    <C-Right>
    <C-Left>


vim tips





## 介绍

[WebAssembly](https://webassembly.org/) 是一种底层编译型的语言，也是一种二进制指令格式。它被设计成可以作为 `C/C++/Rust` 的编译目标。从而使这些语言也可以用来做 web 开发。

- 高效和快速

    二进制，充分利用硬件

- 安全

    运行在沙箱环境

- 开放和可调试

    源码提供了文本化的格式

- Web 平台的一部分

    和 JavaScript 紧密结合

## 概念

### WebAssembly 和 web 平台的融合


web 平台可以看作一下两部分

- 运行代码（app）的虚拟机（virtual machine）
- 代码（app）可以调用的 Web APIs 

面临的问题：当处理 3D 游戏、虚拟和增强显示、计算机视觉、图片和视频编辑等，会遇到性能问题。另外，大型 JavaScrip 应用下载和运行开销比较大。

解决方案：WebAssembly 设计为 JavaScript 的补充。JavaScript 是高阶语言，更灵活。WebAssembly 是低阶语言，性能更好。两者以接口或模块的形式互相调用，存在于一个虚拟机中。

### 核心概念

- **Module**：被浏览器编译后的可执行的机器码。像 ES2015 module 一样有导出和导入。

- **Memory**：大小可变的 ArrayBuffer，包含了 WebAssembly 可以获取的字节数据。

- **Table**：大小可变的 typed array，包含了函数等的引用。

- **Instance**：包含运行时的状态的 Module。类似于一个已经被导入实例化的 ES2015 module。


JavaScript 可以完全控制下载、编译和运行 WebAssembly。可以把 WebAssembly 看成是 JavaScript 提供高性能函数的一个特性。

将来，WebAssembly 的模块能直接方便地以`<script type="module">`的形式使用。

## 如何使用 WebAssembly

WebAssembly 主要提供了一种二进制码以及加载和使用这些二进制码的接口。那么如何在实际中使用呢？

- 使用 [Emscripten](https://developer.mozilla.org/en-US/docs/Mozilla/Projects/Emscripten) 编译 C/C++ 
- 编译 [Rust](https://www.rust-lang.org/)
- 编译 [AssemblyScript](https://docs.assemblyscript.org/)
- 直接在编译层面书写和生成 WebAssembly

### 编译 C/C++ 

#### 在线编译器

- [WasmFiddle](https://wasdk.github.io/WasmFiddle/)
- [WasmFiddle++](https://anonyco.github.io/WasmFiddlePlusPlus/)
- [WasmExplorer](https://mbebenita.github.io/WasmExplorer/)

#### Emscripten

Emscripen 是基于 LLVM 来编译 C/C++ 的工具。文档：<https://emscripten.org/index.html>。

**安装**

以 Linux/MacOS 源码安装为例

```bash
# Get the emsdk repo
git clone https://github.com/emscripten-core/emsdk.git

# Enter that directory
cd emsdk

# Download and install the latest SDK tools
./emsdk install latest

# Make the "latest" SDK "active" for the current user. (writes ~/emscripten file)
./emsdk activate latest

```

**使用**

[Tutorial](https://emscripten.org/docs/getting_started/Tutorial.html)

```bash
# Navigate to the emscripten directory under the SDK
cd emsdk/upstream/emscripten
```

`hello_world.c`
```c
#include <stdio.h>

int main() {
    printf("Hello, world!\n");
    return 0;
}
```
    
```bash
# Compiles c 
# Output: a.out.js, a.out.wasm
./emcc /path/to/hello_world.c

# Run output
node a.out.js

# Html with embedded JavaScript and wasm
# Output hello.html, hello.js, hello.wasm
./emcc /path/to/hello_world.c -o hello.html

# Start a HTTP server, then open browser in `http://localhost:5000/hello.html`
serve
```


WebAssembly





一种压缩率较大，适合网页使用的图片格式。由谷歌推出，Safari 和 IE 上暂不支持。

[How can i detect browser support for webp](https://developers.google.com/speed/webp/faq#how_can_i_detect_browser_support_for_webp)

[Intro](https://developers.google.com/web/tools/lighthouse/audits/webp)

### 转换工具

[Getting Started](https://developers.google.com/speed/webp/docs/using)

[下载 libwebp](https://storage.googleapis.com/downloads.webmproject.org/releases/webp/index.html)，使用 `/bin/cwebp.exe` 转换成 webp

    cwebp -q 80 image.png -o image.webp

使用 `/bin/dwebp.exe` 转换回 png

    dwebp -q 80 image.webp -o image.png

### 查看 webp

Chrome 等浏览器可以直接打开

### 兼容性处理，提供回退图片

`picture`会优先使用 source 中可用的类型和值，来替换 `img` 中的值。因此 `img` 是必填的。

```html
<picture>
  <source type="image/webp" srcset="assets/tmp.webp">
  <img alt="" src="assets/tmp.png" />
</picture>
```

### 兼容性处理，第三方库

[webp-hero](https://github.com/chase-moskal/webp-hero) 在不支持 webp 的浏览器中，使用 libwebp， 将 webp 图片渲染成 canvas，再转换成 png 格式。


WebP 图片格式




## 介绍

[Web 开发入门](https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web) 是 MDN 网站上详细全面的 web 开发入门课程。

> Web 入门是一门介绍Web开发实用性的轻课程。在这里你将学会如何设置构建简单网页所需的工具并发布你自己的简易代码。 


Web 开发入门




## 介绍
Webpack 是前端流行的资源加载、打包的工程化工具。

Webpack 默认配置文件：`webpack.config.js`

> 测试环境: webpack 4, React 16


## 安装环境

进入项目目录

    npm install webpack webpack-cli
    npm install webpack-dev-server

    npm install react react-dom

    // babel 扩展
    npm install babel-preset-stage-2

    // react-hot-loader
    npm install react-hot-loader

    // plugins
    npm install clean-webpack-plugin html-webpack-plugin

    // redux
    npm install redux react-redux

## 配置

### package.json

通过`npm run`命令执行本地安装的 webpack 工具

```json
"scripts": {
  "watch": "webpack --watch",
  "build": "webpack",
  "start": "webpack-dev-server --open"
}, 
```

### webpack.config.js 配置

`entry` 目录下有入口文件 `entry.jsx`，其它组件等资源被其引用

`output` 通过`entry.jsx`，加载打包后输出到`dist/bundle.js`

`resolve` 可以 import 的文件后缀

`module.rules` 加载 js/jsx 时用 `babel-loader`来编译，这样就可以在这些文件中自由使用 JSX 和 ES6 了

### 其它配置

`devtool`: 开发模式下可以设置成 `source-map` https://webpack.js.org/configuration/devtool

### 详细配置

`./webpack.config.js`

```javascript
var path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

module.exports = {
  entry: './index.jsx',
  output: {
    path: path.join(__dirname, '/dist'),
    filename: 'bundle.js'
  },
  resolve: {
    extensions: ['.js', '.jsx', 'css'],
  },
  module:{
    rules: [
      {
        test: /\.jsx?$/,
        loaders: 'babel-loader',
        exclude: /node_modules/,
        options: {
          presets: ['react', 'es2015', 'stage-2'],
          plugins: [
            ["import", { libraryName:'antd-mobile', style:'css' }],
          ]
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      }
    ]
  },
  devServer: {
    contentBase: './dist',
    hot: true
  },
  plugins: [
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      template: './index-dev.html'
    }),
  ],
  mode: "development",
};
```

### 入口文件配置

`index.jsx`
```javascript
import React from 'react'
import { render } from 'react-dom'
import App from './components/App'

render(
  <App />,
  document.getElementById('root')
)

if (module.hot) {
  module.hot.accept();
}
```

`index-dev.html`

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>React Example</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>
```

### 开发

开发模式下动态编译：

    webpack-dev-server --open

### 生产模式打包

    webpack

使用：在 HTML 文件中引用 `dist/bundle.js`即可。

## 参考

[Webpack 配置 React 开发环境](https://hulufei.gitbooks.io/react-tutorial/content/webpack.html)


Webpack 配置 React 开发环境




每次向远程仓库提交代码后，需要 ssh 登陆到服务器，手动更新重新构建启动项目。

现使用 Git 提供的 hook 功能，在提交代码后自动触发相应脚本。

## 添加 webhooks

这是服务端 git hook 的添加。由于使用了在线代码托管网站 [码云](http://git.oschina.net)，需登录相应界面添加 web hook。

该 web hook 需要输入一个 POST 地址 和 密码，Push （提交）后自动向该地址 post 本次提交的详细信息和密码。因而在该地址监听 post 请求再执行自动化脚本即可。

![](/assets/webhook.png)


## 监听 hook 触发的请求

### 搭建后台服务
为了避免冲突，单独搭建一个简单的 node express 服务。

```js
var express = require('express');
var exec = require('child_process').exec;

var app = express();

app.post('/webhook', function (req, res) {
    var cmd = 'sh /app/restart.sh';
    exec(cmd, function (err, stdout, stderr) {
        if (err) {
            console.log('error: ' + err)
        } else {
            console.log('stdout: ' + stdout + '\nstderr: ' + stderr);
        }
    });

    res.send('Webhook post.');
});


var port = 5005
console.log('Server listen on ' + port)
app.listen(port);
```


### 执行脚本
将提交后的所有操作写进脚本。通常执行脚本的目录已发生变化，最好在第一行加上 `cd path/to/script`



Git hook 实现提交后自动构建





列举一些常见的开发语言和对应的框架（库）

## 列表

- JavaScript
  - Hotwire: https://hotwired.dev/
  - Qwik: https://github.com/BuilderIO/qwik
  - Marko: https://github.com/marko-js/marko
  - Solid: https://www.solidjs.com/
    - astro: https://astro.build/
  - Lit: https://github.com/lit/lit/
  - React(Preact)
    - Remix
    - Next
    - Nest
  - Vue
    - Nuxt
  - Svelte
    - SvelteKit
  - Angular(AngularJS)

- JavaScript tools
  - webpack
  - vite
  - rollup

- JavaScript chart
  - echarts
  - recharts

- Python
  - Flask
  - Django

- Java
  - Spring Boot
  - Spark

- Ruby
  - Rails

## 心得

### Rails

Ruby 本身语法简洁。Rails 提供了很多约定俗成的写法。Rails 也是个命令行接口，提供很多自动生成命令。大大简化了开发流程。


常见 Web 框架





## 介绍

Web 开发涉及较多的面较广，那么该如何学习呢？

## 基础

### 编程语言

JavaScript, HTML, CSS

HTML 是入口，JavaScript 是核心，CSS 改变外观

学习: 

- 看书（推荐），找相关的基础入门类书，边看边动手。可以先选择介绍 Web，JavaScript 及其框架类图书。

- 在线

    - [Web 入门][0]

    - [freecodecamp.org 官方英文][5]

    - [freecodecamp 中文][4]

    - [codecademy][6]

### 工具

浏览器: Chrome, Firefox

> Chrome，建议安装类 Vim 插件（例如 Surfinkgkeys）、翻译插件

编辑器: VS Code, Atom, Vim, Emacs

命令行交互: bash/cmd, Git

Node/NPM（前端工具和后端的语言环境）

- [多版本 node 管理工具 nvm][7]

### 前端框架

React，Vue，Angular 等。

以 React 为例：

- 看书
- [官网：react][1]
- [初始化工具：create-react-app][2]
- [快速建站：gatsby][3]

### 后端语言和框架

可以尝试不同语言：Node, Python, Java 等。

[0]: https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web
[1]: https://reactjs.org/
[2]: https://github.com/facebook/create-react-app
[3]: https://github.com/gatsbyjs/gatsby
[4]: https://freecodecamp.cn/home
[5]: https://www.freecodecamp.org/
[6]: https://www.codecademy.com
[7]: https://github.com/coreybutler/nvm-windows


Web 开发介绍






## 介绍

前端页面通常运行在浏览器中，但在移动端的 Android 和 iOS 应用中都可以通过 WebView 支持打开前端页面。这样一个前端 H5 页面就可以同时运行在桌面浏览器、移动端浏览器、移动端 APP 内部。这会出现兼容性以及浏览器与应用之间的交互问题。

## 常见问题

### iOS: disable auto zoom for input

字体至少为`16px`
```css
input {
  font-size: 16px;
}
```

### iOS: input border 出现弯曲
```css
border-radius: 0;
```

### MacOS Chrome tracdpad zoom / 触摸板导致的缩放事件

```
// 禁用缩放的例子
window.addEventListener('wheel', e => {
  console.log('Wheel event', e);

  // Zoom
  e.ctrlKey // true

  // Scroll
  e.ctrlKey // false

  if (e.ctrlKey) {
    console.log('Wheel event', e);
    e.preventDefault();
  }
}, { passive: false })
```

### iOS/Android 上传图片点击无响应

#### iOS
label 与 input 分开，想用 label 来触发上传文件，iOS 系统会出现无响应的情况。需要将 input 放在 label 中。
```html
<label for="image_upload">
  <input type="file" id="image_upload" name="image_upload"
  />
</label>
```

#### Android
Android WebView 默认不支持`input[type=file]`，需要在 App 代码中做修改。[参考](https://stackoverflow.com/questions/29045637/html-input-type-file-is-not-working-on-webview-in-android-there-is-any-way-to)

### 浏览器手势捕捉

[参考：Add Touch to Your Site](https://developers.google.com/web/fundamentals/design-and-ux/input/touch/#implement-custom-gestures)

[库：hammerjs](http://hammerjs.github.io/)

### iOS 滚动不流畅

iOS 滚动不流畅可以尝试的方案

#### 添加滚动样式

```css
body {
  -webkit-overflow-scrolling: touch;
}
```

#### 取消局部滚动 auto

滚动元素中的某一`div`样式为`overflow: auto`，会由于局部滚动引起整体滚动卡顿粘滞，需要取消其滚动。可以设置该`div`为`overflow: visible`

### 多端查看 log 信息

引入 [vConsole](https://github.com/Tencent/vConsole)

### Android WebView 页面在桌面 Chrome 远程调式

1. 手机开启调试、通过 USB 连电脑
1. 手机 App 的 WebView 开启调试、打开相关页面
1. 电脑 Chrome 打开 `chrome://inspect`

[远程调试 WebView](https://developers.google.com/web/tools/chrome-devtools/remote-debugging/webviews)

Android 设备使用 USB 连接电脑，也可以使用模拟器（参考 [Android Studio 使用入门](./article/android_studio.md)）

### Android/iOS 元素 scrollTop 始终为 0

未解决。。。

不过可以组合`touch`和`scroll`事件来处理移动端滚动问题

### 浏览器端唤醒应用

移动端浏览器可以通过特定 URL 的链接，直接唤醒对应的应用，实现 H5 到 应用的跳转。

应用端：配置应用能识别的协议：myapp

浏览器端：跳转到对应的 URL `myapp://other/parameters`

```html
<a href="myapp://other/parameters">Open app</a>
```

经常需要已安装则唤醒，未安装则进入下载页面

```javascript
openApp = () => {
  let url = 'myapp://other/parameters';
  let w;
  setTimeout(() => {
    if (!w || !w.closed) {
      W && w.close();
      url = this.getDownloadURL();
      window.location = url;
    }
  }, 500);
  w = window.open(url);
}
```


Web 开发跨平台 tips





## 介绍

随着 web 框架和项目的发展，相应的工具也多起来。比如

- 基于任务的 grunt 和 gulp
- 基于文件打包的 webpack，rollup，parcel 和 browserify
- 利用浏览器对模块的支持快速启动的 Vite

[Task Runners (Gulp, Grunt, etc) and Bundlers (Webpack, Browserify). Why use together?](https://stackoverflow.com/questions/33561272/task-runners-gulp-grunt-etc-and-bundlers-webpack-browserify-why-use-toge)

## Vite

[Vite](https://github.com/vitejs/vite): Next generation fronteend tooling. It's fast!

支持 Vue，React，Svelte 等前端框架

```
npm init @vitejs/app
```

## Webpack

[webpack](https://github.com/webpack/webpack): A bundler for javascript and friends. 

**基于文件**：需要用户进行配置，对各种文件类型做自定义处理。

## Rollup

[Rollup](https://github.com/rollup/rollup) : Next-generation ES module bundler

支持多种**模块**系统。

## Parcel

[parcel](https://github.com/parcel-bundler/parcel): Blazing fast, zero configuration web application bundler 

> 极速零配置 Web 应用打包工具。

**基于文件**：对各种文件类型内置了处理方式。根据文件依赖生成文件树，自动打包和热替换。

## browserify

[browserify](https://github.com/browserify/browserify): browser-side require() the node.js way 

支持浏览器端的 require() 方式，并基于 require 依赖进行打包。

**基于文件**：通过分析 require 找出依赖关系

## grunt/gulp

[Grunt](https://github.com/gruntjs/grunt): The JavaScript Task Runner

[Gulp](https://github.com/gulpjs/gulp): The streaming build system

**基于任务**：打包、编译、压缩等作为任务由用户进行配置。

## 框架相关

**与框架集成**：例如 Angular-cli, vue-cli, dva-cli，作了进一步的包装。

## 其它

使用Go 和 Rust 实现的打包工具，性能比 JavaScript 的工具要好很多

- [Esbuild](https://github.com/evanw/esbuild)
- [swc](https://github.com/swc-project/swc)

参考 [boost-create-react-app-workflow](https://www.leopradel.com/blog/boost-create-react-app-workflow)



Web 项目自动化工具




## 介绍

框架是语言之上的整合，每个框架根据自身特点会形成相关的语法风格。

## 推荐

### component/instance otpions order

1. Side Effects
    - el

1. Global Awareness
    - name
    - parent

1. Component Type
    - functional

1. Template Modifiers
    - delimiters
    - commments

1. Template Dependencies
    - components
    - directives
    - filters

1. Composition
    - extends
    - mixins

1. Interface
    - inheritAttrs
    - model
    - props / propsData

1. Local State
    - data
    - computed

1. Events
    - watch
    - Lifecycle Events
        - beforeCreate
        - created
        - beforeMount
        - mounted
        - beforeUpdate
        - updated
        - activated
        - deactivated
        - beforeDestroy
        - destroyed

1. Non-Reactive Properties
    - methods

1. Rendering
    - template / render
    - renderError

### Element attribute order

1. Definition
    - is

1. List Rendering
    - v-for

1. Conditionals
    - v-if
    - v-else-if
    - v-else
    - v-show
    - v-cloak

1. Render Modifiers
    - v-pre
    - v-once

1. Global Awareness
    -id

1. Unique Attributes
    - ref
    - key
    - slot

1. Two-Way Binding
    - v-model

1. Other Attributes
    
1. Events
    - v-on

1. Content
    - v-html
    - v-text


Vue 语法风格





## 介绍
网页中如果使用了用户本地所没有的字体，需要通过 webfont 的方式提供在线字体。webfont 目前支持 woff 和 woff2 格式。

如果直接通过 ttf 格式转换成 woff/woff2 格式，由于包含了所有的字符，文件会有好几 M 大，不适合网络传输。可以借助特定的工具提取用到的字符合并到字体文件 woff/woff2 中。

## 步骤

### 提取和转换

使用 [glyphhanger](https://github.com/filamentgroup/glyphhanger)

```bash
glyphhanger --whitelist="你好" --formats=woff2,woff --subset=input.ttf
```

### 优化

[Web Font Optimization](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization)

浏览器渲染页面流程

![browser-render](/assets/browser-render.png)

## 参考
https://shkspr.mobi/blog/2013/05/subsetting-chinese-fonts/


Webfont 优化





## 介绍

Vue.js 是一个可以由简到繁构建 web UI 的 JavaScript 框架。

Github 源码：<https://github.com/vuejs/vue>

官网：https://vuejs.org

## 源码

地址：<https://github.com/vuejs/vue/tree/dev/src>

### package.json：项目配置和入口

用 npm 管理的项目，其配置信息都保存在`package.json`中。

`Vue.js`用 [rollup](https://github.com/rollup/rollup) 进行打包，配置文件和脚本放在`scripts`文件下。

打包后的文件作为入口文件`main`。

`package.json`
```json
"scripts": {
  "dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev",
  ...
},
```

以`web 端开发`打包环境为例，查看 `scripts/config.js`，可以找到入口为 `src/platform` 下的 `web/entry-runtime-with-compiler.js`

```javascript
// Runtime+compiler development build (Browser)
'web-full-dev': {
  entry: resolve('web/entry-runtime-with-compiler.js'),
  dest: resolve('dist/vue.js'),
  format: 'umd',
  env: 'development',
  alias: { he: './entity-decoder' },
  banner
},
```

### src 目录结构

使用 Vue.js 后会发现，主要是实例化 Vue 对象和调用 Vue 上的方法。在阅读源码时就要重点关注 **Vue 对象** 的定义及其方法的添加。

    src             // 源码
    |+compiler/     // 编译器，基于 AST 解析 HTML 代码和重新生成
    |+core/         // 核心功能，定义了 Vue 对象
    |+platforms/    // 入口，按平台添加 web 和 weex 的编译器和运行时等
    |+server/       // 服务端渲染
    |+sfc/          // single-file component (*.vue) 解析成 sfc 描述对象
    `+shared/       // 共享的常量和工具函数

### Vue 对象

查看`src/platform/web/entry-runtime-with-compiler.js`：在 Vue 对象及其原型上添加加载、编译方法后导出。

```javascript
import Vue from './runtime/index'

Vue.prototype.$mount = function (
...

Vue.compile = compileToFunctions

export default Vue
```

`src/platform/web/runtime/index` -> `src/core/index.js`： Vue 对象最终来自于 `src/core/instance/index.js`，添加全局方法（Global API）后导出

#### Vue 对象的定义、内部方法

`src/core/instance/index.js`：定义 Vue 对象，添加初始化，添加状态、事件、生命周期、渲染等方法。
```javascript
function Vue (options) {
  if (process.env.NODE_ENV !== 'production' &&
    !(this instanceof Vue)
  ) {
    warn('Vue is a constructor and should be called with the `new` keyword')
  }
  this._init(options)
}

initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)
```

#### Vue 对象的全局方法

`src/core/index`：可以看出全局方法是通过 `src/core/global-api/index`添加的。

```javascript
import Vue from './instance/index'
import { initGlobalAPI } from './global-api/index'

...
initGlobalAPI(Vue)
...

export default Vue
```

`global-api`目录，对 Vue 对象添加了各类方法。以常用的`component`为例，`src/core/shared/contants.js`中配置，`global-api/assets.js`中定义。

    ~global-api/
     |-assets.js
     |-extend.js
     |-index.js
     |-mixin.js
     `-use.js

### Virtual DOM

`src/core/vdom`包含了对虚拟 DOM 的相关处理。Vue.js 的虚拟 DOM 更新来自于虚拟 DOM 库 snabbdom： <https://github.com/snabbdom/snabbdom>。

虚拟 DOM 会创建虚拟节点（vnode），通过 DOM API 和实际 DOM 节点交互。通过 patch 方法对比新旧节点实现部分更新以提高效率。

> DOM API，即常用的原生 createElment，AppendChild，removeChild 等。


Vue 源码阅读

## 介绍

作为前端主流框架之一，vue.js 生态系统日益完善。了解和学习 vue.js，可以学到很多新的思维观念。

### 参考

- [基本概念][0]
- [风格指引][1]

## 入门

在 HTML 中引入 vue.js 文件即可使用。

下载到本地或使用远程 CDN

```html

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id='app'>
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>
```

```javascript
const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split(' ').reverse().join(' ');
    }
  }
})
```

## 语法

### 实例化 Vue 对象

```javascript
const vm = new Vue(options)
```

`vm`(ViewModel) 为 Vue 的实例，在 options 的函数中可以通过`this`访问定义在实例上的数据和方法。

### 标签`内容`绑定对象

    <tag>{{ variable }}</tag>

```html
<div id="app">
  {{ message }}
</div>
```

```javascript
const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
```

### 标签`属性/事件`绑定对象

    <tag v-bind:attr="variable" v-on:event="expression/method">...</tag>

`:`后面为指令的参数，可以通过`[argument]`动态计算。

`v-bind:`, `v-on:`可以简写为`:`和`@`。

    v-bind:title => :title
    v-on:click   => @click

```html
<span v-bind:title="message">
  Hover your mouse over me for a few seconds
  to see my dynamically bound title!
</span>

<button v-on:click="reverseMessage">Reverse Message</button>
```

### 条件和循环

    v-if
    v-show
    v-for

```html
<span v-if="seen">Now you see me</span>

<li v-for="todo in todos">
  {{ todo.text }}
</li>
```

```javascript
const app = new Vue({
  el: '#app-3',
  data: {
    seen: true,
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }
})
```

### data 中数组、对象修改

对于数组、对象等复杂数据结构，使用的都是这些变量的`引用`。修改时需要做额外处理，以实现 UI 的即时刷新。

- 使用 Vue 内部处理过的方法：

    push(), pop(), shift(), unshift(), splice(), sort(), reverse()

- 使用 Vue.set 或 vm.$set 方法

以修改数组某个元素为例

```javascript
vm.items.splice(itemIndex, 1, newValue)
vm.$set(vm.items, itemIndex, newValue)

import Vue from 'vue'
Vue.set(items, itemIndex, newValue)
// object in array
Vue.set(object, 'propName', newValue)
```

修改数组长度（变小）

```javascript
vm.items.splice(newLength);
```

Vue 不允许添加 root 级别的属性到实例上。但是当属性本身是一个对象时，可以在该对象上添加属性

```javascript
vm.$set(vm.userProfile, 'age', 27);

vm.userProfile = Object.assign({}, vm.userProfile, {
  age: '27', 
  favoriteColor: 'Vue Green',
});
```

### 双向绑定

常用于表单输入标签。本质上是语法糖，基于用户输入事件来更新数据。

    v-model

```html
<div>
  <p>{{ message }}</p>
  <input v-model="message">
</div>
```

### 自定义组件

`Vue.component`方法可以自定义组件，组件是可复用的 Vue 实例, `definition` 基本上与 `options`一致。

```javascript
Vue.component(id, definition);
```

### 组件的数据

- data 

    `() => Object` - 组件内部、私有的数据

- props

	`[propA, propB, ...]` || `{ propA: { type: String, default: '' } }` - 组件外部传递过来、公开的数据

- computed 

	`{ dataA() {}, dataB() {} }` - 根据 data 或 props 动态计算出来的数据。

### 指令

`v-model`, `v-for`, `v-if`, `v-bind`, `v-on` 等都是内置指令，用户也可以自定义指令，主要用于底层的 DOM 操作。

    Vue.directive(id, definition);

#### v-html: Raw HTML

```vue
<span v-html="rawHtml"></span>

<span>{{ plainText }}</span>
```

### 父子组件数据传递

父组件 -> 子组件：通过`props`单向传递数据。父组件数据变化后子组件会自动刷新

子组件 -> 父组件：调用 events 手动修改父组件的数据 

组件内部：`$emit('event')`

组件外部：`v-on:event="method"`

```javascript
Vue.component('test-component', {
    template: '#test-template', 
    props: ['value'], 
    methods: {
        onInput: function (event) {
            this.$emit('input', event.target.value)
        }
    }
})

Vue.component('show-component', {
    template: '#show-template', 
    props: ['user'],
})

new Vue({
    el: '#app',
    data: {
        user: 'John'
    }
})

```

```html
<template id='test-template'>
  <input v-bind:value='value' v-on:input='onInput' type='text'/>
</template>
<template id='show-template'>
  <div>{{ user }}</div>
</template>

<div id='app'>
  <test-component v-model='user'></test-component>
  <show-component v-bind:user='user'></show-component>
</div>
```

### 一些报错及原因

    [Vue warn]: Property or method "addItem" is not defined on the instance but referenced during render.

一个常见原因为没在组件上定义好属性或方法；另一个原因是`div#app`中包含了`template`，`template`的内容被 Vue 解析到 root 中，导致报错。


### 预处理器

.vue 单文件由`vue-loader`预加载和处理。文件中的 HTML, JavaScript, CSS 都可以进行预处理。

[参考：Using Pre-Processors](https://vue-loader.vuejs.org/guide/pre-processors.html)

#### Pug -> HTML

    npm install -D pug pug-plain-loader

```javascript
// webpack.config.js -> module.rules
{
  test: /\.pug$/,
  loader: 'pug-plain-loader'
}
```

```html
<template lang="pug">
div
  h1 Hello world!
</template>
```

SASS/LESS -> CSS

Coffee/TypeScript -> JavaScript

## vue-cli

```
npm i -g @vue/cli

vue create <project-name>
cd <project-name>
npm start
```

## 在线交互

<div id='app-demo'>
<div>
  <p><strong>Try Vue :)</strong></p>
  <span> Input: {{ text }} <span>
</div>
<textarea class='textarea' name='' cols='30' rows='10' v-model='text'></textarea>
</div>

<script>
const script = document.createElement('script');
script.src = "https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js";
document.body.appendChild(script);

setTimeout(function () {
  if (typeof Vue !== 'undefined') {
    new Vue({
      el: '#app-demo',
      data: {
        text: 'hello'
      },
      methods: {
        sayHello: function () {
          console.log(this.text);
        }
      }
    })
  }
}, 1000)
</script>

```javascript
// Init Vue with el, data and methods
new Vue({
  el: '#app-demo',
  data: {
    text: 'hello'
  },
  methods: {
    sayHello: function () {
      console.log(this.text);
    }
  }
})
```


[0]: https://vuejs.org/v2/guide/index.html
[1]: https://vuejs.org/v2/style-guide/#Component-instance-options-order-recommended

Vue 学习笔记





## Nuxt.js

[Nuxt.js](https://nuxtjs.org/) 多平台、多配置的很全面的 Vue 框架。

- 高性能
- 模块化
- 友好的开发体验

## Quasar

[Quasar](https://quasar.dev/) 也是一个一套代码多平台部署的集成 Vue 框架。


Vue 相关框架





## Web

### vscode for the Web

- https://vscode.dev/

### Monaco Editor: vscode 底层的代码编辑器，支持web

- https://github.com/microsoft/monaco-editor
- https://microsoft.github.io/monaco-editor/playground.html

## VSCodeVim: capture group in replace

旧版本 VSCodeVim 支持的是 JavaScript 正则表达式语法 `$1`

新版本则支持 Vim 正则表达式语法 `\1`

```
:%s/te(.)t/$1/g

:%s/te(.)t/\1/g
```
## VSCodeVim: newline

当前版本 1.51

- 支持搜索 `/\n...`
- 不支持替换 `:s/\n/...`

需要使用原始的 Vim

## Extension

### 安装运行入门模板
使用 Yeoman 初始化模板代码。

```
npm i -g yo generator-code
```

```
yo code

# ? What type of extension do you want to create? New Extension (TypeScript)
# ? What's the name of your extension? HelloWorld
### Press <Enter> to choose default for all options below ###

# ? What's the identifier of your extension? helloworld
# ? What's the description of your extension? LEAVE BLANK
# ? Initialize a git repository? Yes
# ? Bundle the source code with webpack? No
# ? Which package manager to use? npm

code ./helloworld
```

按下 ||F5||，会在新窗口中编译、运行扩展

打开命令窗口输入 `Hello World`, 可以看到消息提示

### 文件结构

- package.json

    - Contribute

- extension.ts


VSCode tips





通过 Vagrant 启动的虚拟机，可以直接通过默认网关连接到宿主机。

### linux 虚拟机

输入命令

    netstat -rn


结果

    Kernel IP routing table
    Destination     Gateway         Genmask         Flags   MSS Window  irtt Iface
    10.0.2.0        0.0.0.0         255.255.255.0   U         0 0          0 eth0
    192.168.29.0    0.0.0.0         255.255.255.0   U         0 0          0 eth1
    169.254.0.0     0.0.0.0         255.255.0.0     U         0 0          0 eth0
    169.254.0.0     0.0.0.0         255.255.0.0     U         0 0          0 eth1
    0.0.0.0         10.0.2.2        0.0.0.0         UG        0 0          0 eth0

虚拟机可以通过 `10.0.2.2` 连接到宿主机

### Windows 虚拟机

输入命令

    ipconfig

输出中的 `Default Gateway` 可用来连到主机


在虚拟机中连接宿主机




[Vite](https://github.com/vitejs/vite): Next generation fronteend tooling. It's fast!

新一代的前端开发打包工具，启动和热更新速度都很快（秒级）。支持 Vue，React，Svelte 等前端框架

最新版本(v5.0) 需要 Node **18+, 20+**

## New project

```
npm create vite@latest
```

## Migrate from Webpack to Vite

- `npm i vite --save-dev`

- `package.json`

    ```
    "scripts": {
      "dev": "vite",
    }
    ```

- Copy `public/index.html` to `./index.html`

- `index.html`, replace `%PUBLIC_URL%/` with `/`, add

    ```html
    <script type="module" src="/src/index.js"></script>
    ```

- `npm run dev`


Vite 介绍





## Smooth scroll

```javascript
const scrollDown = () => {
  window.scrollBy({
    top: 20, 
  })
  if (keepScroll) {
    window.requestAnimationFrame(scrollDown)
  }
}
```

## Request header

- [Host](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Host) 请求的目标服务器域名。未指定端口时，默认`443`(https) 或`80`(http)

    ```
    Host: developer.mozilla.org
    ```

- [Origin](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Origin) 发送请求的源域名

    ```
    Origin: https://developer.mozilla.org
    ```

- [Referer](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer) 发送请求的页面地址（完整或部分地址）

    ```
    Referer: https://developer.mozilla.org/en-US/docs/Web/JavaScript
    Referer: https://example.com/page?q=123
    Referer: https://example.com/
    ```

- [Location](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Location) 页面重定向的页面地址（绝对或相对地址）。仅用于响应状态为`3xx`或`201`

    ```
    Location: /index.html
    ```

## Use emoji as favicon

```html
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>⌛</text></svg>">
```

## Audio

- [Web_Audio_API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API)

## Proxy

[Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) 用来为代理其它对象，便于控制对该对象的读写等基础操作

```
new Proxy(target, handler)
```

```javascript
const target = {
  message1: 'Hello',
  message2: 'everyone'
}

const handler = {
  get: function (target, prop, receiver) {
    return 'world'
  }
}

const proxy = new Proxy(target, handler)

console.log(proxy.message1) // world
```

## history.pushState

可以手动添加历史记录和状态，用于浏览器的前进和后退
```
history.pushState(state, title, [, url])
```

## Get selected text

```javascript
window.getSelection().toString()
```

## 动态添加脚本、样式等

```javascript
const script = document.createElement("script");
script.setAttribute("src", "https://example.com/example.js");
document.body.appendChild(script);

const style = document.createElement("link");
style.setAttribute("href", "https://example.com/example.css");
document.body.appendChild(style);
```

## 可折叠元素

[`<summary>`: The Disclosure Summary element](https://interactive-examples.mdn.mozilla.net/pages/tabbed/summary.html)

<details>
  <summary>I have keys but no doors. I have space but no room. You can enter but can’t leave. What am I?</summary>
  A keyboard.
</details>

```html
<details>
  <summary
    >I have keys but no doors. I have space but no room. You can enter but can’t
    leave. What am I?</summary
  >
  A keyboard.
</details>
```

## 元素到顶部的距离

### offsetTop -> offsetParent

[HTMLElement.offsetTop](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop): 元素到[父元素（offsetParent）](https://developer.mozilla.org/en-US/docs/Web/API/HTMLelement/offsetParent)的距离。一般是固定值。

```javascript
topPos = element.offsetTop;
```

### getBoundingClientRect().top -> viewport

[getBoundingClientRect().top](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) 获取元素到 viewport 的距离。随页面滚动而变化。

```javascript
domRectTop = element.getBoundingClientRect().top;
```

![](/assets/rect.png)

## 元素高度

### 窗口高度

    window.innerHeight

### 设置图片高度

    imgDom.height = 200;

### 普通元素高度

    dom.style.height = '50px';

## 点击选中所有文本

```javascript
function selectText(containerid) {
  if (document.selection) {
    // IE
    var range = document.body.createTextRange();
    range.moveToElementText(document.getElementById(containerid));
    range.select();
  } else if (window.getSelection) {
    var range = document.createRange();
    range.selectNode(document.getElementById(containerid));
    window.getSelection().removeAllRanges();
    window.getSelection().addRange(range);
  }
}
```

## asiidoc 文档

与 markdown 类似的文档书写格式，一个例子：https://github.com/billziss-gh/winfsp/blob/master/doc/WinFsp-Tutorial.asciidoc

## 文件对象转为 base64 字符串

File 是 Blob 的子类，可以使用 FileReader 读取

```javascript
const getBase64 = (file) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => {
      resolve(reader.result);
    };
    reader.onerror = (error) => {
      reject(error);
    };
  });
};
```

## 使用 `rel="noopener"`避免`target="_blank"`导致的安全问题

问题：`a`标签单独使用`target="_blank"`属性时，目标网站会获取原网站的权限（window.opener 对象），导致很严重的安全问题。

建议处理方案：使用`rel="noopener noreferrer"`

```html
<a href="{src}" target="_blank" rel="noopener noreferrer">Out Link</a>
```

<https://mathiasbynens.github.io/rel-noopener> 很好地解释了这个问题。

## 避免表单提交时自动在 URL 上添加问号（？）

假设定义了表单

```javascript
<form onSubmit={submit}>
    ...
</form>
```

在提交响应中需要取消浏览器事件的默认行为

```javascript
submit = (e) => {
  e.preventDefault();
};
```

## DOM 与 string 的相互转换

### string to DOM

```javascript
const parser = new DOMParser();
const dom = parser.parseFromString(text, "text/html");
```

### DOM to string

```javascript
// whole dom content
const div = document.createElement("div");
console.log(div.outerHTML);

// content inside dom
console.log(node.innerHTML);
```

## WebRTC: 浏览器实时交换数据

[WebRTC API](https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API)

## 自定义请求 header

注意 key 中尽量不要包含下划线。部分服务器出于安全考虑会去掉这些请求头。

## 获取事件定义时的 DOM

获取事件定义所在的 DOM

    event.currentTarget

获取导致事件触发的 DOM

    event.target

## 滑动条实现：input[type="range"]

```html
<input
  type="range"
  value="1"
  min="0.5"
  max="10"
  className="slide"
  id="myRange"
/>
```

```javascript
var slider = document.getElementById("myRange");

slider.oninput = function () {
  this.value;
};
```

## 检查如何移动到当前页面的

    performance.navigation.type
    // 0: link
    // 1: reload
    // 2: back_forward
    // 255: other

## Sticky 失效问题

经常是由于父元素包含滚动样式（例如设置了样式 overflow: scroll）导致的。可以取消父元素的滚动，改为监听 window 的滚动。

## 事件捕获和冒泡

DOM 事件流传递有两种模型，捕获（capture）：父元素到子元素；冒泡（bubble）：子元素到父元素。现行标准中，由目标元素（子元素）触发的完整的事件流包含先捕获后冒泡两个阶段，即`父 ->（捕获） 子 ->（冒泡） 父`。

使用`addEventListener`的第三个参数可以指定是否在捕获阶段触发事件（默认冒泡）。如果指定为捕获阶段，可以达到比默认冒泡提前触发响应事件的效果。

使用`stopPropagation`可以阻止事件继续传递。

最内部的子元素定义多个事件时按注册顺序触发。

```html
<div id="div1">
  div1
  <div id="div2">div2</div>
</div>

<script>
  document.getElementById("div1").addEventListener(
    "click",
    function (e) {
      console.log("click div1 at capture");
    },
    true
  );
  document.getElementById("div2").addEventListener(
    "click",
    function (e) {
      console.log("click div2 at capture");
    },
    true
  );
  document.getElementById("div1").addEventListener("click", function (e) {
    console.log("click div1 at bubble");
  });
  document.getElementById("div2").addEventListener("click", function (e) {
    console.log("click div2 at bubble");
  });
</script>
```

点击`div1`后的 console

    click div1 at capture
    click div2 at capture
    click div2 at bubble
    click div1 at bubble

## table 设置列宽度

设置 table-layout 属性为 fixed

```css
.table-fixed {
  table-layout: fixed;
}

.table-fixed th.small {
  width: 30%;
}

.table-fixed td {
  word-wrap: break-word;
}
```

## 显示任意 Unicode

<span>&#x263A;</span> 对应编码：`U+263A`

<span>&#x1F44F;</span> 对应编码：`U+1F44F`

### HTML 直接展示

```html
<span>&#x263A;</span>
```

### JavaScript 处理后展示

```javascript
// 0xFFFF 以下 (16-bits)
String.fromCharCode(0x263a);

// 所有 Unicode (21 bits)
String.fromCodePoint(0x1f44f);
```

## table-layout

指定 table 中 cells, rows, columns 的布局

auto: cells 的宽度会适应内部的内容
fix: cells 的宽度由第一行的 cells 决定

```css
table {
  table-layout: fixed;
  width: 100px;
}
```

## viewport

将移动设备上浏览器默认宽度设置为屏幕宽度。（默认会大于屏幕宽度）

```html
<meta name="viewport" content="width=device-width, initial-scale=1" />
```

## `<a>`下载链接

```html
<a href="path/to/file.ext" download="filename">Downalod Link</a>
```

## `<ruby>` 元素，添加上标

```html
<ruby>
  汉 <rp>(</rp><rt>Han</rt><rp>)</rp> 字 <rp>(</rp><rt>zi</rt><rp>)</rp>
</ruby>
```

<ruby>
  汉 <rp>(</rp><rt>Han</rt><rp>)</rp>
  字 <rp>(</rp><rt>zi</rt><rp>)</rp>
</ruby>

## input(type=number) 输入小数

input(type="number") 输入类型为数值。可以设置最小最大值。容易被忽视的一点是，通过修改 step 可以输入小数（float）。

下面例子中，允许输入最小 0.1，最大 10，间隔为 0.1 的数值。

```html
<input type="number" step="0.1" min="0" max="10" />
```


Web tips





## 介绍

**WebRTC**（Web Real-Time Communications） 技术让网络应用和网站能够在浏览器间直接获取和传输音视频数据和其他任意数据。

WebRTC 包含了多个相关联的 API 和 协议，以实现多媒体和普通数据的连接和传输。


参考：[MDN WebRTC API](https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API)

## WebRTC 概念和用法

WebRTC 有多个用途，主要涉及媒体流 API。网站可以支持强大的多媒体功能：如音视频通话、文件交换、身份识别、传统电话系统等。

节点的连接通过 [RTCPeerConnection][1] 接口创建和表示。连接建立和打开后，媒体流（[MediaStream][2]）或数据通道（[RTCDataChannel][3]）可以添加到连接中。

媒体流包含了任意数量的 track，track 用 [MediaStreamTrack][4] 表示，包含了很多媒体数据，如音频、视频和文本等。

普通二进制数据使用 [RTCDataChannel][3] 接口。

## WebRTC 接口

接口分为以下几类：连接设置和管理、身份识别和安全、电话。

[0]: https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API
[1]: https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection
[2]: https://developer.mozilla.org/en-US/docs/Web/API/MediaStream
[3]: https://developer.mozilla.org/en-US/docs/Web/API/RTCDataChannel
[4]: https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack


WebRTC 介绍





## 介绍

网页中存储数据有多种方式。如直接存储， `localStorage`，`sessionStorage`，`cookies`，`indexedDB` 等。那么这些存储方式有什么区别呢？

参考：[Using the Web Storage API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API)

## 共性和区别

都属于特定的页面（域），但 cookies 可以在同一主域下的多个子域共享。

## JavaScript 脚本直接存储

普通 JavaScript 对象，生命周期与当前网页一致。

## [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)

没有过期时间

```javascript
localStorage.setItem('key', 'value');
localStorage.getItem('key');
```

## [sessionStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage)

    页面会话。只要浏览器打开，页面重载或恢复后都还存在；浏览器关闭则会清除。

在新的 tab 或 window 中打开页面，会初始化新的**sessionStorage**。


## [HTTP cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies)

过期时间，默认浏览器决定，可能持续几周。可以通过设置 `max-age` `expires` 修改。

HTTP cookie 是服务器发送给浏览器的一小块数据（`set-cookie`）。浏览器对该服务器发送请求时会带回该 cookie，来保持业务状态，让服务器记住发送请求的客户端（`cookie`）。

过去，cookie 被浏览器用来存储客户端数据，因为这是以前唯一可选的方式。现在则建议优先使用上述 storage API。

```javascript
// Read
allCookies = document.cookie;

// Write
document.cookie = "name=oeschger; Secure";
```

### 优点

在主域下的多个子域可以共享数据。

### 缺点

最大 4K。每次请求都会带上。 

### 限制

- HTTP only (Secure) cookies 无法通过 JavaScript 读取。
- Cross-domain cookies 无法读取。

    axios 中的`withCredentials`只能保证请求带上`cookie`，并获取响应的`set-cookie`。

### 参考

- [Document.cookie - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/document/cookie)，
- [JavaScript Cookies](https://www.w3schools.com/js/js_cookies.asp)

```javascript
document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
```

## indexedDB

以 NoSQL 数据库形式，按对象存储。适合大容量数据存储和离线使用。


Web storage





## 介绍

有时候需要调试编译打包后的页面，这个时候就需要一个能快速启停的 web 服务器。

## 常用 web 服务器程序

### serve（node）

安装

    npm i serve -g

搭建基于 dist 文件夹的服务器

    serve dist

### python SimpleHTTPServer 模块

启动

    python -m SimpleHTTPServer

    python3 -m http.server

### 其它

构建工具自带服务器

    webpack-dev-server, parcel

需要较多配置的服务器

    nginx, apache


能快速调试页面的 web 服务器





## 介绍

开发者写的源文件，可以经过编译、转化、压缩等处理后再编译构建成实际运行的项目。这样既方便开发，又能处理以适应实际环境的需要。

## 常用工具

[Babel](https://babeljs.io/docs/en/index.html): 主要用于将 ECMAScript 2015+ 的代码转换成向后兼容老版浏览器环境的 JavaScript 代码。

[post-css](https://github.com/postcss/postcss): 对 CSS 做预处理。

[post-html](https://github.com/posthtml/posthtml): 对 HTML/XML 做转换

[uglify-js](https://github.com/mishoo/UglifyJS2): 对 JavaScript（ECMAScript 5）做预处理，包括解析、最小化、压缩和美化等。

[prettier](https://github.com/prettier/prettier): 多种编程语言的格式化

### 变种语言

通过扩展或修改特性产生的变种语言，可以通过对应的编译器生成 HTML，CSS，JavaScript 等基础语言。

例如

- [less](http://lesscss.org/)

- [sass](https://sass-lang.com/install)

- [pug](https://github.com/pugjs/pug)

- [typescript](https://www.typescriptlang.org/index.html#download-links)

## Grunt + prettier 举例

[Grunt](https://github.com/gruntjs/grunt) 可以监控文件改变并调用对应的任务。可以通过 grunt 动态编译 less/sass, pug 等文件到 css, html。然而，转译出来的文件格式可读性并不好。可以再使用 prettier 美化生成的文件。

全局安装

    npm i -g prettier

项目内安装

    npm i grunt grunt-contrib-watch grunt-contrib-pug grunt-contrib-less

假设源文件在`page`目录下

`Gruntfile.js`
```javascript
module.exports = function (grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    pug: {
      compile: {
        options: {
          pretty: true,
          doctype: 'html',
        },
        files: [
          {
            expand: true,
            cwd: 'page',
            src: ['**/*.pug'],
            dest: 'page',
            ext: '.axml',
            extDot: 'last',
          }
        ],
      }
    },
    less: {
      compile: {
        options: {},
        files: [
          {
            expand: true,
            cwd: 'page',
            src: ['**/*.less'],
            dest: 'page',
            ext: '.acss',
            extDot: 'last',
          }
        ],
      }
    },
    watch: {
      pug: {
        files: ['page/**/*.pug'],
        tasks: ['pug'],
        options: {
          spawn: false,
        }
      },
      less: {
        files: ['page/**/*.less'],
        tasks: ['less'],
        options: {
          spawn: false,
        }
      },
    }
  })

  grunt.loadNpmTasks('grunt-contrib-pug');
  grunt.loadNpmTasks('grunt-contrib-less');
  grunt.loadNpmTasks('grunt-contrib-watch');

  grunt.registerTask('default', ['pug', 'less', 'watch'])
}
```

在两个终端中分别输入命令

    grunt

    prettier page/**/*.js --write

可以放在 package.json 的 scripts 中，以后就能直接运行了

  "scripts": {
    "grunt": "grunt",
    "prettier:js": "prettier page/**/*.js --write",
    ...
  },


Web 开发的文件预处理




- Visual Studio

    > 微软出品，重量级的集成开发环境，有完善的代码补全、调试等等功能

    > Managing solutions and projects

- Visual Studio Code

    > 微软出品，相对轻量级

    > Managing files and folders


Visual Studio (Visual Studio Code) 介绍




## 问题

vim 在目录搜索包含特定文本的文件时，自带的 vimgrep 速度不够，且在项目中使用时无法自动忽略 node_modules 等。

## 解决方案

- [ripgrep](https://github.com/BurntSushi/ripgrep) 速度最快，Windows 支持中文。安装要复杂些。

或者

- [ag (the_silver_searcher)](https://github.com/ggreer/the_silver_searcher) 速度也很快，Windows 中文有问题（网上说需要 Cygwin 版本解决）


速度快，能够根据 .gitignore 或 .ignore 忽略文件和文件夹

### 安装

- [ripgrep#installation](https://github.com/BurntSushi/ripgrep#installation)

- [ag for windows](https://github.com/k-takata/the_silver_searcher-win32/releases)


### vim 配置

安装 [ack.vim](https://github.com/mileszs/ack.vim)

在 .vimrc 中，加入

    " rg config
    let g:ackprg = 'rg  --vimgrep'

    " ag config
    let g:ackprg = 'ag  --nogroup --nocolor --column'
    
### 使用

在vim 命令模式中输入 Ack 加参数。

简单的例子：

    Ack word_to_search d:/code

正则表达式搜索：

    Ack PATTERN d:/code

PATTERN 的正则表达式语法可以参考 [Perl_Compatible_Regular_Expressions](https://en.wikipedia.org/wiki/Regular_expression#Perl_and_PCRE_(Perl_Compatible_Regular_Expressions))

不搜索指定文件（夹）：

> .gitignore 或 ag 自己的配置文件 .ignore (语法类似)


Vim 快速搜索文本





## syntax/\*.vim 不生效

大部分语法文件会检查当前是否已加载过其它语法文件。检查某个变量

    if exists("b:current_syntax")

如需重复加载，需要先移除改变量

## 常用语法

语法高亮重复的区域，按先后顺序覆盖，有包含关系的可以嵌套。

`syn keyword` 定义关键字高亮 

    syn keyword cssTagName abbr address area a b base

`syn match` 定义正则表达式匹配后的高亮

    syn match cssValue contained "[-+]\=\d\+$\.\d*$\=$[a-z]\+$\=\>" contains=cssUnitDecorators,cssValueNumber

> contained: 该语法高亮被包含时才生效
> contains=: 包含其它语法高亮

`syn include` 导入其它语法文件，注意先移除判断变量如 `b:current_syntax`

    syn include @CSSSyntax syntax/css.vim

> @CSSSyntax: 导入后的语法高亮的集合，可以被包含在其它语法高亮里

`syn region` 定义范围内的高亮

    syn region vueScript contained start=+<script$\s.\{-}$\?>+ end=+</script>+ keepend contains=@jsAll,jsImport,jsExport,@XMLSyntax

> start: 起始位置
> end: 结束位置
> keepend: 匹配两端


Vim syntax 语法高亮总结





## Debug

- `:debug`
- https://github.com/puremourning/vimspector
- https://github.com/mfussenegger/nvim-dap

### Vimspector

#### Install

```
Plugin 'puremourning/vimspector'
```

#### Dependencies

Vim or Neovim with Python3.10 or later. Check `:echo has('python3')`

```
# neovim example
python3 -m pip install --user --upgrade pynvim
```

#### Add adapters for node and python

```
./install_gadget.py --force-enable-node --enable-python
```

#### Add configuration

Nodejs and Python example. Press <kbd>F5</kbd> on `*.js` or `*.py` files.

`.vimspector.json`
```json
{
  "$schema": "https://clcode.net/assets/vimspector.schema.json",
  "adapters": {},
  "configurations": {
    "Node": {
      "adapter": "js-debug",
      "filetypes": [ "javascript" ],
      "default": true,
      "configuration": {
        "request": "launch",
        "stopOnEntry": false,
        "console": "integratedTerminal",
        "program": "${file}",
        "cwd": "${workspaceRoot}"
      },
      "breakpoints": {
        "exception": {
          "all": "",
          "uncaught": ""
        }
      }
    },
    "Python": {
      "adapter": "debugpy",
      "filetypes": [ "python" ],
      "default": true,
      "configuration": {
        "request": "launch",
        "program": "${file}",
        "stopOnEntry": false,
        "cwd": "${workspaceRoot}"
      },
      "breakpoints": {
        "exception": {
          "raised": "N",
          "uncaught": "",
          "userUnhandled": ""
        }
      }
    }
  }
}
```

#### Mappings

##### Human Mode

```vimscript
let g:vimspector_enable_mappings = 'HUMAN'
```

| Key          | Mapping                                       | Function
| ---          | ---                                           | ---
| `F5`         | `<Plug>VimspectorContinue`                    | When debugging, continue. Otherwise start debugging.
| `F3`         | `<Plug>VimspectorStop`                        | Stop debugging.
| `F4`         | `<Plug>VimspectorRestart`                     | Restart debugging with the same configuration.
| `F6`         | `<Plug>VimspectorPause`                       | Pause debuggee.
| `F9`         | `<Plug>VimspectorToggleBreakpoint`            | Toggle line breakpoint on the current line.
| `<leader>F9` | `<Plug>VimspectorToggleConditionalBreakpoint` | Toggle conditional line breakpoint or logpoint on the current line.
| `F8`         | `<Plug>VimspectorAddFunctionBreakpoint`       | Add a function breakpoint for the expression under cursor
| `<leader>F8` | `<Plug>VimspectorRunToCursor`                 | Run to Cursor
| `F10`        | `<Plug>VimspectorStepOver`                    | Step Over
| `F11`        | `<Plug>VimspectorStepInto`                    | Step Into
| `F12`        | `<Plug>VimspectorStepOut`                     | Step out of current function scope

In addition, I recommend adding a mapping to `<Plug>VimspectorBalloonEval`, in
normal and visual modes, for example:

```viml
" mnemonic 'di' = 'debug inspect' (pick your own, if you prefer!)

" for normal mode - the word under the cursor
nmap <Leader>di <Plug>VimspectorBalloonEval
" for visual mode, the visually selected text
xmap <Leader>di <Plug>VimspectorBalloonEval
```

You may also wish to add mappings for navigating up/down the stack, toggling
the breakpoints window, and showing disassembly, for example:

```viml
nmap <LocalLeader><F11> <Plug>VimspectorUpFrame
nmap <LocalLeader><F12> <Plug>VimspectorDownFrame
nmap <LocalLeader>B     <Plug>VimspectorBreakpoints
nmap <LocalLeader>D     <Plug>VimspectorDisassemble
```


Vim Debug & Test





[stackoverflow 的讨论](https://stackoverflow.com/questions/1470488/what-is-the-purpose-of-the-var-keyword-and-when-to-use-it-or-omit-it)

## 最高票答案

If you're in the global scope then there's no difference.

If you're in a function then `var` will create a local variable, "no var" will look up the scope chain until it finds the variable or hits the global scope (at which point it will create it):

```js
// These are both globals
var foo = 1;
bar = 2;

function()
{
    var foo = 1; // Local
    bar = 2;     // Global

    // Execute an anonymous function
    (function()
    {
        var wibble = 1; // Local
        foo = 2; // Inherits from scope above (creating a closure)
        moo = 3; // Global
    }())
}
```

If you're not doing an assignment then you need to use `var`:

```js
var x; // Declare x
```


var 关键字作用总结





## 介绍

[Vanish](https://varnish-cache.org/intro/index.html#intro) 是高速 HTTP 反向代理缓存, 实现 Web 应用加速。


Varnish HTTP Cache




## Synced Folders（同步文件夹）

### 安装 VBoxGuestAdditions

**前提**：虚拟机 box 里需要安装 VirtualBox Guest Additions。有的 box 自带了，没有则要手动安装：

1. VirtualBox 界面虚拟机光驱加载 VBoxGuestAdditions.iso

1. 在虚拟机中运行安装脚本

        mkdir /cdrom
        mount /dev/cdrom /cdrom

        sh /cdrom/VBoxLinuxAdditions.run

### 设置同步
- centos6: 主机中 `Vagrantfile` 所在目录会和虚拟机中的 `/Vagrant` 目录同步。

- centos7: VirtualBox 界面中已经设置同步文件夹，名为 vagrant。挂载即可：

        mkdir -p /vagrant
        mount -t vboxsf vagrant /vagrant


Vagrant 同步文件夹




## 准备

- Virtual Box [下载](https://www.virtualbox.org/wiki/Downloads)
- Vagrant [下载](https://www.vagrantup.com/downloads.html)
- .box 文件（本例：centos-7.0-x86_64.box） [下载](http://www.vagrantbox.es/) ( 如果国内网络下不动 [官方 boxes](https://app.vagrantup.com/boxes/search)，可以先下载 .box 文件到本地，再添加到虚拟机中)

## 目录
创建 vm 目录, 包含需要的文件

    vm/
    |
    | - centos-7.0-x86_64.box
    | - Vagrantfile

## 添加虚拟机

    # 提前下载好 box
    vagrant box add --name centos7 centos-7.0-x86_64.box

    # 在线下载 box 后添加
    vagrant box add <box-name> <box-url> --provider virtualbox --box-version value

## 配置 Vagrantfile

文件格式为'ruby'，参考本文 <a href="#appendix">附录</a>

## 启动

    vagrant up


## ssh 连接

假设配置虚拟机为`<vm-name>`，`root`密码配置为 `vagrant`，

    vagrant ssh <vm-name>

## 设置虚拟机和主机同步文件夹

使用 vagrant 的一大场景，是在 Windows 主机下的代码需要在虚拟机 Linux 环境中调试。这就需要 [vagrant 同步文件夹](/article/vagrant_share.md)。

## 常见问题

### 网络问题

Vagrant plugin 是通过 gem 下载的。可以更改 gem 源来解决网络问题。

    gem source --add https://gems.ruby-china.org/ --remove https://rubygems.org/

### 本地添加 box 版本无法识别

本地添加的 box 默认版本为 0，导致不识别，重新开始网上下载。可以通过修改版本号再改回来，绕过该问题。

1. 找到`~/.vagrant.d/boxes/laravel-VAGRANTSLASH-homestead/0`, 将文件夹名 0 改成需要的版本，如 6.1.0

1. `vagrant up`，会报错，提示不能修改

1. 将文件夹改回 0

1. `vagrant up`, 可以读取本地 box 了

## <a id="appendix" name="appendix">#</a>附录：Vagrantfile 例子 

```ruby
    # -*- mode: ruby -*-
    # vi: set ft=ruby :
    VAGRANTFILE_API_VERSION = "2"
    
    $script = <<SCRIPT
    # Silly Ubuntu 12.04 doesn't have the
    # --stdin option in the passwd utility
    echo root:vagrant | chpasswd
    
    cat << EOF >> /etc/hosts
    192.168.29.63 lab
    
    EOF
    SCRIPT
    
    # All Vagrant configuration is done below. The "2" in Vagrant.configure
    # configures the configuration version (we support older styles for
    # backwards compatibility). Please don't change it unless you know what
    # you're doing.
    Vagrant.configure(VAGRANTFILE_API_VERSION) do |config|
      # The most common configuration options are documented and commented below.
      # For a complete reference, please see the online documentation at
      # https://docs.vagrantup.com.
    
      # Every Vagrant development environment requires a box. You can search for
      # boxes at https://atlas.hashicorp.com/search.
      config.vm.define :lab do |labvm_config|
        labvm_config.vm.box = "centos7"
        labvm_config.ssh.insert_key = false
        labvm_config.vm.provision "shell", inline: $script
    
        labvm_config.vm.hostname = "lab"
        labvm_config.vm.network "private_network", ip: "192.168.29.65"
    
        labvm_config.vm.provider "virtualbox" do |v|
          v.customize ["modifyvm", :id, "--memory", "1024"]
          v.customize ["modifyvm", :id, "--cpus","1"]
        end
      end
    
      # Disable automatic box update checking. If you disable this, then
      # boxes will only be checked for updates when the user runs
      # `vagrant box outdated`. This is not recommended.
      # config.vm.box_check_update = false
    
      # Create a forwarded port mapping which allows access to a specific port
      # within the machine from a port on the host machine. In the example below,
      # accessing "localhost:8080" will access port 80 on the guest machine.
      # config.vm.network "forwarded_port", guest: 80, host: 8080
    
      # Create a private network, which allows host-only access to the machine
      # using a specific IP.
      # config.vm.network "private_network", ip: "192.168.33.10"
      
      # Create a public network, which generally matched to bridged network.
      # Bridged networks make the machine appear as another physical device on
      # your network.
      # config.vm.network "public_network"
    
      # Share an additional folder to the guest VM. The first argument is
      # the path on the host to the actual folder. The second argument is
      # the path on the guest to mount the folder. And the optional third
      # argument is a set of non-required options.
      #config.vm.synced_folder ".", "/vagrant", type: "virtualbox"
    
      # Provider-specific configuration so you can fine-tune various
      # backing providers for Vagrant. These expose provider-specific options.
      # Example for VirtualBox:
      #
      # config.vm.provider "virtualbox" do |vb|
      #   # Display the VirtualBox GUI when booting the machine
      #   vb.gui = true
      #
      #   # Customize the amount of memory on the VM:
      #   vb.memory = "1024"
      # end
      #
      # View the documentation for the provider you are using for more
      # information on available options.
    
      # Define a Vagrant Push strategy for pushing to Atlas. Other push strategies
      # such as FTP and Heroku are also available. See the documentation at
      # https://docs.vagrantup.com/v2/push/atlas.html for more information.
      # config.push.define "atlas" do |push|
      #   push.app = "YOUR_ATLAS_USERNAME/YOUR_APPLICATION_NAME"
      # end
    
      # Enable provisioning with a shell script. Additional provisioners such as
      # Puppet, Chef, Ansible, Salt, and Docker are also available. Please see the
      # documentation for more information about their specific syntax and use.
      # config.vm.provision "shell", inline: <<-SHELL
      #   apt-get update
      #   apt-get install -y apache2
      # SHELL
    end
```


Vagrant 管理虚拟机





<https://github.com/vlang/v>

## About
Simple, fast, safe, compiled language for developing maintainable software. Compiles itself in <1s with zero library dependencies. Supports automatic C => V translation. <https://vlang.io>


The V Programming Language




## 列表

- Whiteboard
  - <https://github.com/excalidraw/excalidraw>, <https://excalidraw.com/>

- Video making

  - [Animaker](https://app.animaker.com)
  - [PowToon](https://www.powtoon.com)
  - [Renderforest](https://www.renderforest.com/)
  - [Others](https://alternativeto.net/software/animaker/?license=free)

- Music visualizer

  - [specterr](https://app.specterr.com/create)

- Diagram

  - [plantuml](https://plantuml.com/en/class-diagram)

- Record

  - [asciinema - Record and share your terminal sessions, the simple way](https://asciinema.org/)

- Image

  - [unsplash.com: The internet’s source of freely-usable images.](unsplash.com)

  - [Diverse UI is a free set of user images that can be used in personal or commercial projects.](https://diverseui.com/)

- [Sound Library](https://developers.google.com/assistant/tools/sound-library)

- [Scale image ](https://github.com/idealo/image-super-resolution)
- [Text Logo Maker](https://logomaker.herokuapp.com/gstyle.php)
- [os wallpapers](https://oswallpapers.com/)

- [7-principles-of-rich-web-applications](https://rauchg.com/2014/7-principles-of-rich-web-applications)

- Comic

    - [The Awkward Yeti](https://theawkwardyeti.com)

    - [Dilbert by Scott Adams](https://dilbert.com/)

- [from-osx-to-ubuntu](https://nicolas.perriault.net/code/2017/from-osx-to-ubuntu/)
- [Teach Yourself Programming in Ten Years](http://norvig.com/21-days.html)
- [FOSSMint: Everything About Linux and FOSS](https://www.fossmint.com/)
- [查看不同浏览器对某一标准的支持情况](https://caniuse.com/#home)

- [图片库 https://unsplash.com/](https://unsplash.com/)

- [设计作品 https://dribbble.com/](https://dribbble.com/)

- [设计作品 https://www.behance.net/](https://www.behance.net/)

- [图标库 iconfont](https://www.iconfont.cn/)

- [交互式的 JavaScript notebook](https://observablehq.com/)

- [查看各平台默认支持的字体](http://fontfamily.io/)

- [ruby-for-beginners](http://ruby-for-beginners.rubymonstas.org/index.html)

- [图片压缩：tiny png/jpg](https://tinyjpg.com/)

- [vim awesome plugins](https://vimawesome.com/)

- [画流程图等](https://www.lucidchart.com)

- [产品原型工具网站](https://www.xiaopiu.com/)

- [各种包管理工具的托管库集合](https://libraries.io/)

- [build your own lisp](http://www.buildyourownlisp.com/)

- [编程课程和教程 hacker.io](https://hackr.io/)

- [CSS 设计模式](http://cssdesignpatterns.com/)

- [同类软件推荐 alternativeto.net](https://alternativeto.net/)

- [在线工具（颜色 RGB to HSL 转换等） rapidtables.com](https://www.rapidtables.com/)

- [正则表达式 测试和解释 regex101.com](https://regex101.com/)

- [Gif 表情包搜索 API：tenor.com](https://tenor.com/gifapi#quickstart)

- [Directed Graph Editor](http://bl.ocks.org/rkirsling/5001347)

- [Mozilla SSL Configuration Generator](https://mozilla.github.io/server-side-tls/ssl-config-generator/)
- [服务器 ssl 测试 ssllabs.com](https://www.ssllabs.com/index.html)

- [Cloudflare 网站性能与安全 cloudflare.com](https://www.cloudflare.com/)

- [所有符号 Unicode 编码查询 graphemica.com/](http://graphemica.com/)

- [编程文档集合 devdocs.io](http://devdocs.io/)

- [图标库 pngtree.com](https://pngtree.com/free-icons)

    - [水果类图标](https://pngtree.com/free-icon/fruit-juice_591622)

- [图标库 flaticon](https://www.flaticon.com/categories)

- [在线编程题库 leetcode.com](https://leetcode.com/)

- [在线软件交互学习 katacoda.com](https://www.katacoda.com/)

- [简略 JavaScript 行话](http://jargon.js.org/)

- [Redux 介绍](https://redux.js.org/basics)


有用的网站记录





## 介绍
文本、语言的核心区别是语法。[unified][unified] 基于语法树对文本解析、转换和编译。

根据文本输入获得语法树，称为 parser；根据语法树生成文本，称为 compiler；对不同语言的语法树进行转换，称为 transformer。

    | ....................... process() ......................... |
    | ......... parse() ..... | run() | ..... stringify() ....... |

              +--------+                     +----------+
    Input ->- | Parser | ->- Syntax Tree ->- | Compiler | ->- Output
              +--------+          |          +----------+
                                  X
                                  |
                           +--------------+
                           | Transformers |
                           +--------------+

通过插件来支持处理不同语言的语法树，如：

-   [**rehype**][rehype] ([**HAST**][hast]) — HTML
-   [**remark**][remark] ([**MDAST**][mdast]) — Markdown
-   [**retext**][retext] ([**NLCST**][nlcst]) — Natural language

## 举例

### 安装

    npm install unified 
    npm install remark-parse remark-rehype rehype-document rehype-format rehype-stringify vfile-reporter

### 使用 

把 Markdown 文本做转换成 HTML 

```javascript
var unified = require('unified');
var markdown = require('remark-parse');
var remark2rehype = require('remark-rehype');
var doc = require('rehype-document');
var format = require('rehype-format');
var html = require('rehype-stringify');
var report = require('vfile-reporter')

unified()
    .use(markdown)
    .use(remark2rehype)
    .use(doc)
    .use(format)
    .use(html)
    .process('# Hello world', function (err, file) {
        console.error(report(err || file))
        console.log(String(file))
    })

```

输出

```html
no issues found
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <h1>Hello world</h1>
  </body>
</html>
```

- [unified]: https://github.com/unifiedjs/unified

- [rehype]: https://github.com/rehypejs/rehype

- [remark]: https://github.com/remarkjs/remark

- [retext]: https://github.com/retextjs/retext

- [hast]: https://github.com/syntax-tree/hast

- [mdast]: https://github.com/syntax-tree/mdast

- [nlcst]: https://github.com/syntax-tree/nlcst


unifiled: 基于抽象语法树（AST）的文本处理工具





## 介绍

[Unicode](https://en.wikipedia.org/wiki/Unicode) 是对文本字符的编码、展示和处理标准。定义了字符（char）和编码（code point）的对应关系。

> 字符：展示、视觉层面的图像
>
> 编码：存储、传输层面的数据，习惯写成十六进制，例如 U+07FF

UTF 是 Unicode Transformation Format 的缩写。UTF-\* 是 Unicdoe 标准的各种实现方案。

UTF-8 和 UTF-16 是两种常见的字符 unicode 编码实现方式。两者有何区别呢？

## 区别

[参考](https://stackoverflow.com/questions/496321/utf-8-utf-16-and-utf-32/16565745)

区别主要在编码的**存储方式**上。

### UTF-8

节约空间。可变长度的编码，向后兼容 ASCII 英文字符的前 128 个编码（U+0000 - U+007F）仅用一个字节。对英文友好。

    U+0000 - U+007F（ASCII 字符）：一个字节
    U+0080 - U+07FF：两个字节
    U+0800 - U+FFFF：三个字节
    U+10000 - U+10FFFF：四个字节

### UTF-16

兼顾空间和效率。也是可变长度的编码。英文和中文（U+4E00 - U+9FFFF）一般需要两个字节。对中文比较友好。

    U+0000 - U+FFFF：两个字节
    U+10000 - U+10FFFF：四个字节

### UTF-32

效率最高的定长编码。使用较少。

## 近似估计中英文字符串宽度

JavaScript 通过 `String.prototype.charCodeAt`获取字符对应编码，再根据编码判断字符类型。

```javascript
//U+4E00 - U+9FFFF
function mixWidth(str) {
    var width = str.length;
    for (var i = str.length; i >= 0; i--) {
        var code = str.charCodeAt(i);
        if (code >= 0x4E00 && code <= 0x9FFF) {
            width++;
        }
    }
    return width;
}
```


Unicode, UTF-8, UTF-16





## 介绍

[uni app](https://github.com/dcloudio/uni-app)：支持 Vue 开发方式的多端统一开发框架

## 使用

使用 Vue 的命令行工具 vue-cli

安装

    npm i -g @vue/cli

创建 uni-app 项目

    vue create -p dcloudio/uni-preset-vue uni-app-demo

选择模板后会自动生成项目

运行发布

    npm run dev: %PLATFORM%
    npm run build: %PLATFORM%

`%PLATFORM%` 可选值

    h5, mp-alipay, mp-baidu, mp-weixin, mp-toutiao

输出目录：`/dist/dev` 或 `/dist/build`


uni-app 介绍





## UI frameworks

- [Semantic-ui](https://github.com/semantic-org/semantic-ui)

    Semantic is a UI component framework based around useful principles from natural language.

## 原型工具

- [Balsamiq Cloud](https://balsamiq.cloud/)

- [InVision | Digital product design, workflow & collaboration](https://www.invisionapp.com/)

## Photoshop 导出图片与网页图片颜色不一致

设置了相同的颜色值，显示却不同，需要修改导出选项

Photoshop > File > Export > Save for Web > Uncheck `convent to sRGB`


UI tips





## 介绍

TypeScript 是 JavaScript 的类型化超集，会编译成普通的 JavaScript 运行。

借助工具和集成开发环境（IDE），TypeScript 添加了设计时的支持，如补全和类型检查；以及编译时的检查。（design-time support and compile-time checking）

## 应用

React, Vue, Angular, Svelte 等框架都支持使用 TypeScript

Node 端可以使用 [ts-node](https://github.com/TypeStrong/ts-node)

## Tips with React

- [https://github.com/typescript-cheatsheets/react](https://github.com/typescript-cheatsheets/react)

- [https://react-typescript-cheatsheet.netlify.app/docs](https://react-typescript-cheatsheet.netlify.app/docs/basic/setup)

### Enum

可以忽略值，默认从 0 开始增加

```typescript
enum UserResponse {
  No = 0,
  Yes = 1,
}

function respond(message: UserResponse): void {
  // ...
}

respond(UserResponse.Yes)

```

### Literal object

```typescript
const obj: { [key: string]: string } = {
  a: 'abc', 
}
```

### React props type

```typescript
export defualt function Component(props: { count: number }) {
  // ...
}
```

### Function type

```typescript
const add: (a: number, b: number) => number = function(a: number, b:number) {
  return a + b
}
```

### React Class Component type

```typescript
interface Props {}
interface State {}

class MyComponent extends React.Component<Props, State> {
}
```

## 概念

按范围来，有
- 程序
- 模块
- 接口
- 类
- 函数
- 变量
- 枚举
- 域
- 编译
- 生命周期


## 类型安全

根据不同分类方式：

- 静态、动态和可选类型

- 推断类型、内置类型、自定义类型

- 高级类型声明，类型推断机制

## 创建模块

声明模块，并向模块添加接口、类和函数。

## 加载模块

有几种模块加载方式，有各自的模块声明、引用和脚本加载风格：

- Bundling

> 显式声明模块

- CommonJS

- AMD

> 文件即模块

## 配合现有 JavaScript

## 单元测试


TypeScript 学习笔记




## 介绍

TypeScript 的实验特性装饰器（Decorators），本质上是一个函数，对装饰的对象（类或类的成员）做额外处理。可以把一部分辅助代码独立出来。

例如，Angular2 框架中使用了装饰器（如：@Component、@Input 等）来定义框架内的类和对象，使代码更简洁明了。

## 例子

装饰器函数主要用来接收和处理被装饰的对象，也就是参数`descriptor`

```typescript
import { Injectable } from '@angular/core';

function addUrlPre(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const oldValue = descriptor.value;
  descriptor.value = (option) => {
    return 'http://' + oldValue.call(target, option);
  };

  return descriptor;
};

@Injectable()
export class ExampleClass {

  @addUrlPre
  private setURL(option) {
    return this.formatURL(option);
  }

  ...
}
```

参考 

[TypeScript Decorators](https://www.typescriptlang.org/docs/handbook/decorators.html)

[TypeScript Decorators Examples](https://gist.github.com/remojansen/16c661a7afd68e22ac6e)


TypeScript Decorators（装饰器）





## Open-source offline

LibreTranslate/LibreTranslate: Free and Open Source Machine Translation API. Self-hosted, offline capable and easy to setup.

- https://github.com/LibreTranslate/LibreTranslate

argosopentech/argos-translate: Open-source offline translation library written in Python

- https://github.com/argosopentech


Translate





## 介绍

TCP/IP 协议中，计算机组成子网，子网通过路由器彼此连接。当一台计算机连不上目标机器时，可以通过跟踪路由来分析哪一环出了问题。

## 命令
### tracert（Windows）

    tracert hostname

### traceroute（Linux）

    traceroute hostname

### 结果

实现原理为通过 TTL 递增，实现每次访问的路由器数加 1，直到终点。从而找出经过的所有路由器。

每次查询时发送 3 个包进行探测，故返回结果中包含了目标域名（IP）和 3 个通信时间。

      1     1 ms     2 ms     1 ms  192.168.200.1                                       
      2     1 ms     3 ms     2 ms  100.64.11.251                                       
      3     *        *        *     请求超时。                                               
      4     8 ms     8 ms     6 ms  124.74.124.73                                       
      5     3 ms     4 ms     4 ms  124.74.210.241                                      
      6    10 ms    10 ms    10 ms  101.95.120.182                                      
      7     9 ms     5 ms     5 ms  202.97.57.145                                       
      8     8 ms     7 ms     6 ms  202.97.90.53                                        
      9   150 ms   147 ms   146 ms  202.97.50.110                                       
     10   149 ms   151 ms   152 ms  202.97.50.70                                        
     11   300 ms   298 ms   291 ms  4.53.210.113                                        
     12   179 ms   174 ms   181 ms  ae-0-11.bar1.SanFrancisco1.Level3.net [4.69.140.145]
                                                                                        
     13   250 ms   228 ms   256 ms  QUALITY-TEC.bar1.SanFrancisco1.Level3.net [4.14.111.
    246]                                                                                
     14   211 ms     *      171 ms  173.225.175.158                                     
     15   208 ms   210 ms   216 ms  65.74.145.155                                       
     16   217 ms   203 ms   198 ms  63.245.208.18                                       
     17   232 ms   212 ms   214 ms  mozilla-org.public.mdc1.mozilla.com [63.245.208.195]
                                                                                        
    跟踪完成。                                                                               


Trace route（路由跟踪）

Apache Tomcat provides a "pure Java" HTTP web server environment in which Java code can also run. Thus it is a Java web application server.

- <https://tomcat.apache.org/>


## Install & Run

Download Tomcat 10 at <https://tomcat.apache.org/download-10.cgi>

- Download file `apache-tomcat-10.1.18.zip`
- unzip to `apache-tomcat-10.1.18`
- cd `apache-tomcat-10.1.18/bin`
- run `./startup.sh` or `startup.bat` for Windows
- visit <http://localhost:8080/>

- shutdown `./shutdown.sh`

## ENV

- `$CATALINA_HOME`: `/path/to/apache-tomcat-10.1.18`
- `$CATALINA_BASE`: will be set to the value of `CATALINA_HOME` by default

## Deployment

Tomcat can be used to deploy Java web application.

- Copy the web application archive file (`*.war`) into directory `$CATALINA_BASE/webapps/`. When Tomcat is started, it will automatically expand the web application archive file into its unpacked form, and execute the application that way.

- Copy `unpacked` directory hierarchy into a subdirectory in directory `$CATALINA_BASE/webapps/`. Tomcat will assign a `context path` to application based on the `subdirectory name`.

- Use Tomcat "Manager" or Tomcat Deployer

If `$CATALINA_BASE/webapps/` has `demo-app.war` or `demo-app/`,  then you can access your application at <http://localhost:8080/demo-app>

### Standard Directory Layout

Tomcat uses the same layout as WAR format. Root directory

- **\*.html, \*.jsp, etc** - The HTML and JSP pages, along with other files that must be visible to client browser (such as JavaScript, CSS, and images).
- **/WEB-INF/web.xml** - The Web Application Deployment Descriptor.
- **/WEB-INF/classes/** - Java class files and resources, including both servlet and non-servlet classes, that are not combined into JAR files. Java packages will be reflected as directory. 

    For example, a Java class named `com.mycompany.mypackage.MyServlet` would need to be stored in a file named `/WEB-INF/classes/com/mycompany/mypackage/MyServlet.class`.

- **/WEB-INF/lib/** - JAR files that contain Java class files and resources, such as third party class libraries or JDBC drivers.

### Shared Library Files 

`$CATALINA_HOME/lib` library JAR files (or unpacked classes) are visible to both web applications and internal Tomcat code.

### Web Application Deployment Description

**/WEB-INF/web.xml** defines everything about your application that a server needs to know (except the *context path*, which is assigned by the system administrator when the application is deployed).


<details>
<summary><a>A basic `web.xml` file</a></summary>
```xml

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns="https://jakarta.ee/xml/ns/jakartaee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="https://jakarta.ee/xml/ns/jakartaee
                      https://jakarta.ee/xml/ns/jakartaee/web-app_6_0.xsd"
  version="6.0">


    

    <display-name>My Web Application</display-name>
    <description>
      This is version X.X of an application to perform
      a wild and wonderful task, based on servlets and
      JSP pages.  It was written by Dave Developer
      (dave@mycompany.com), who should be contacted for
      more information.
    </description>


    

    <context-param>
      <param-name>webadmin</param-name>
      <param-value>myaddress@mycompany.com</param-value>
      <description>
        The EMAIL address of the administrator to whom questions
        and comments about this application should be addressed.
      </description>
    </context-param>


    

    <servlet>
      <servlet-name>controller</servlet-name>
      <description>
        This servlet plays the "controller" role in the MVC architecture
        used in this application.  It is generally mapped to the ".do"
        filename extension with a servlet-mapping element, and all form
        submits in the app will be submitted to a request URI like
        "saveCustomer.do", which will therefore be mapped to this servlet.

        The initialization parameter names for this servlet are the
        "servlet path" that will be received by this servlet (after the
        filename extension is removed).  The corresponding value is the
        name of the action class that will be used to process this request.
      </description>
      <servlet-class>com.mycompany.mypackage.ControllerServlet</servlet-class>
      <init-param>
        <param-name>listOrders</param-name>
        <param-value>com.mycompany.myactions.ListOrdersAction</param-value>
      </init-param>
      <init-param>
        <param-name>saveCustomer</param-name>
        <param-value>com.mycompany.myactions.SaveCustomerAction</param-value>
      </init-param>
      
      <load-on-startup>5</load-on-startup>
    </servlet>

    <servlet>
      <servlet-name>graph</servlet-name>
      <description>
        This servlet produces GIF images that are dynamically generated
        graphs, based on the input parameters included on the request.
        It is generally mapped to a specific request URI like "/graph".
      </description>
    </servlet>


    

    <servlet-mapping>
      <servlet-name>controller</servlet-name>
      <url-pattern>*.do</url-pattern>
    </servlet-mapping>

    <servlet-mapping>
      <servlet-name>graph</servlet-name>
      <url-pattern>/graph</url-pattern>
    </servlet-mapping>


    

    <session-config>
      <session-timeout>30</session-timeout>    
    </session-config>


</web-app>
```
</details>


### Tomcat Context Descriptor

A **/META-INF/context.xml** file can be used to define Tomcat specific configuration options, such as an access log, data sources, session manager configuration and more. See [Tomcat configuration documentation](http://localhost:8080/docs/config/context.html)

Apache Tomcat





## 介绍

Tmux 是同时运行多个命令、管理多个会话和窗口的终端工具。

```
tmux split-window 'shell command'
```

### 窗口间移动

||ctrl-b||, ||h(jkl)||

### 窗口相同大小

||ctrl-b||, ||Alt||+||2||

## tmux shortcuts and cheatsheet

https://gist.github.com/MohamedAlaa/2961058

## Start

start new:

    tmux

start new with session name:

    tmux new -s myname

attach:

    tmux a  #  (or at, or attach)

attach to named:

    tmux a -t myname

list sessions:

    tmux ls

<a name="killSessions"></a>kill session:

    tmux kill-session -t myname

<a name="killAllSessions"></a>Kill all the tmux sessions:

    tmux ls | grep : | cut -d. -f1 | awk '{print substr($1, 0, length($1)-1)}' | xargs kill

In tmux, hit the prefix `ctrl+b` (my modified prefix is ctrl+a) and then:

## Sessions

    :new<CR>  new session
    s  list sessions
    $  name session

## <a name="WindowsTabs"></a>Windows (tabs)

    c  create window
    w  list windows
    n  next window
    p  previous window
    f  find window
    ,  name window
    &  kill window

## <a name="PanesSplits"></a>Panes (splits)

    %  vertical split
    "  horizontal split

    o  swap panes
    q  show pane numbers
    x  kill pane
    +  break pane into window (e.g. to select text by mouse to copy)
    -  restore pane from window
    ⍽  space - toggle between layouts
    <prefix> q (Show pane numbers, when the numbers show up type the key to goto that pane)
    <prefix> { (Move the current pane left)
    <prefix> } (Move the current pane right)
    <prefix> z toggle pane zoom

## <a name="syncPanes"></a>Sync Panes

You can do this by switching to the appropriate window, typing your Tmux prefix (commonly Ctrl-B or Ctrl-A) and then a colon to bring up a Tmux command line, and typing:

```
:setw synchronize-panes
```

You can optionally add on or off to specify which state you want; otherwise the option is simply toggled. This option is specific to one window, so it won’t change the way your other sessions or windows operate. When you’re done, toggle it off again by repeating the command. [tip source](http://blog.sanctum.geek.nz/sync-tmux-panes/)

## Resizing Panes

You can also resize panes if you don’t like the layout defaults. I personally rarely need to do this, though it’s handy to know how. Here is the basic syntax to resize panes:

    PREFIX : resize-pane -D (Resizes the current pane down)
    PREFIX : resize-pane -U (Resizes the current pane upward)
    PREFIX : resize-pane -L (Resizes the current pane left)
    PREFIX : resize-pane -R (Resizes the current pane right)
    PREFIX : resize-pane -D 20 (Resizes the current pane down by 20 cells)
    PREFIX : resize-pane -U 20 (Resizes the current pane upward by 20 cells)
    PREFIX : resize-pane -L 20 (Resizes the current pane left by 20 cells)
    PREFIX : resize-pane -R 20 (Resizes the current pane right by 20 cells)
    PREFIX : resize-pane -t 2 20 (Resizes the pane with the id of 2 down by 20 cells)
    PREFIX : resize-pane -t -L 20 (Resizes the pane with the id of 2 left by 20 cells)

## Copy mode:

Pressing PREFIX [ places us in Copy mode. We can then use our movement keys to move our cursor around the screen. By default, the arrow keys work. we set our configuration file to use Vim keys for moving between windows and resizing panes so we wouldn’t have to take our hands off the home row. tmux has a vi mode for working with the buffer as well. To enable it, add this line to .tmux.conf:

    setw -g mode-keys vi

With this option set, we can use h, j, k, and l to move around our buffer.

To get out of Copy mode, we just press the ENTER key. Moving around one character at a time isn’t very efficient. Since we enabled vi mode, we can also use some other visible shortcuts to move around the buffer.

For example, we can use "w" to jump to the next word and "b" to jump back one word. And we can use "f", followed by any character, to jump to that character on the same line, and "F" to jump backwards on the line.

       Function                vi             emacs
       Back to indentation     ^              M-m
       Clear selection         Escape         C-g
       Copy selection          Enter          M-w
       Cursor down             j              Down
       Cursor left             h              Left
       Cursor right            l              Right
       Cursor to bottom line   L
       Cursor to middle line   M              M-r
       Cursor to top line      H              M-R
       Cursor up               k              Up
       Delete entire line      d              C-u
       Delete to end of line   D              C-k
       End of line             $              C-e
       Goto line               :              g
       Half page down          C-d            M-Down
       Half page up            C-u            M-Up
       Next page               C-f            Page down
       Next word               w              M-f
       Paste buffer            p              C-y
       Previous page           C-b            Page up
       Previous word           b              M-b
       Quit mode               q              Escape
       Scroll down             C-Down or J    C-Down
       Scroll up               C-Up or K      C-Up
       Search again            n              n
       Search backward         ?              C-r
       Search forward          /              C-s
       Start of line           0              C-a
       Start selection         Space          C-Space
       Transpose chars                        C-t

## Misc

    d  detach
    t  big clock
    ?  list shortcuts
    :  prompt

## Configurations Options:

    # Mouse support - set to on if you want to use the mouse
    * setw -g mode-mouse off
    * set -g mouse-select-pane off
    * set -g mouse-resize-pane off
    * set -g mouse-select-window off

    # Set the default terminal mode to 256color mode
    set -g default-terminal "screen-256color"

    # enable activity alerts
    setw -g monitor-activity on
    set -g visual-activity on

    # Center the window list
    set -g status-justify centre

    # Maximize and restore a pane
    unbind Up bind Up new-window -d -n tmp \; swap-pane -s tmp.1 \; select-window -t tmp
    unbind Down
    bind Down last-window \; swap-pane -s tmp.1 \; kill-window -t tmp

## Resources:

- [tmux: Productive Mouse-Free Development](http://pragprog.com/book/bhtmux/tmux)
- [How to reorder windows](http://superuser.com/questions/343572/tmux-how-do-i-reorder-my-windows)

## Notes:

-

## Changelog:

- 1411143833002 - Added [toggle zoom](#PanesSplits) under Panes (splits) section.
- 1411143833002 - [Added Sync Panes](#syncPanes)
- 1414276652677 - [Added Kill all tmux sessions ](#killAllSessions)
- 1438585211173 - [corrected create and add next and previus thanks to @justinjhendrick](#WindowsTabs)

## Request an Update:

We Noticed that our Cheatsheet is growing and people are coloberating to add new tips and tricks, so please tweet to me what would you like to add and let's make it better!

- Twitter: [@MohammedAlaa](http://twitter.com/MohammedAlaa)


Tmux tips





一个 Linux 命令速查工具：[tldr](https://github.com/tldr-pages/tldr)。

```
npm i -g tldr
```

## 背景

当遇到一个新的命令，例如 `tar` 时，通常会使用 `tar --help` 或者 `man tar`。然而，这些帮助信息花了大量篇幅介绍所有的使用方式。即使只是用命令来完成一个简单的任务，也需要仔细阅读文档。

```
$ curl --help
Usage: curl [options...] <url>
     --abstract-unix-socket <path> Connect via abstract Unix domain socket
     --anyauth       Pick any authentication method
 -a, --append        Append to target file when uploading
     --basic         Use HTTP Basic Authentication
     --cacert <CA certificate> CA certificate to verify peer against
     --capath <dir>  CA directory to verify peer against
 -E, --cert <certificate[:password]> Client certificate file and password
     --cert-status   Verify the status of the server certificate
     --cert-type <type> Certificate file type (DER/PEM/ENG)
     --ciphers <list of ciphers> SSL ciphers to use
     --compressed    Request compressed response
 -K, --config <file> Read config from a file
     --connect-timeout <seconds> Maximum time allowed for connection
     --connect-to <HOST1:PORT1:HOST2:PORT2> Connect to host
 -C, --continue-at <offset> Resumed transfer offset
 -b, --cookie <data> Send cookies from string/file
 -c, --cookie-jar <filename> Write cookies to <filename> after operation
     --create-dirs   Create necessary local directory hierarchy
     --crlf          Convert LF to CRLF in upload
     --crlfile <file> Get a CRL list in PEM format from the given file
 -d, --data <data>   HTTP POST data
     --data-ascii <data> HTTP POST ASCII data
     --data-binary <data> HTTP POST binary data
     --data-raw <data> HTTP POST data, '@' allowed
     --data-urlencode <data> HTTP POST data url encoded
     --delegation <LEVEL> GSS-API delegation permission
     --digest        Use HTTP Digest Authentication
```

## tldr

TL;DR 表示 "Too Long; Didn't Read"。旨在用最少的文字——说明加举例，让用户快速上手。

```
$ tldr curl

  curl

  Transfers data from or to a server.                                               
  Supports most protocols, including HTTP, FTP, and POP3.                           
                                                                                    
  - Download the contents of an URL to a file:                                      
    curl http://example.com -o filename                                             
                                                                                    
  - Download a file, saving the output under the filename indicated by the URL:     
    curl -O http://example.com/filename                                             
                                                                                    
  - Download a file, following [L]ocation redirects, and automatically [C]ontinuing 
(resuming) a previous file transfer:                                                
    curl -O -L -C - http://example.com/filename                                     
                                                                                    
  - Send form-encoded data (POST request of type application/x-www-form-urlencoded):
                                                                                    
    curl -d 'name=bob' http://example.com/form                                      
                                                                                    
  - Send a request with an extra header, using a custom HTTP method:                
    curl -H 'X-My-Header: 123' -X PUT http://example.com                            
                                                                                    
  - Send data in JSON format, specifying the appropriate content-type header:       
    curl -d '{"name":"bob"}' -H 'Content-Type: application/json' http://example.com/
users/1234                                                                          
                                                                                    
  - Pass a user name and password for server authentication:                        
    curl -u myusername:mypassword http://example.com                                
                                                                                    
  - Pass client certificate and key for a resource, skipping certificate validation:
                                                                                    
    curl --cert client.pem --key key.pem --insecure https://example.com             
```


tldr: Linux 命令速查工具





## 介绍

[TensorFlow](https://github.com/tensorflow/tensorflow) 是一个开源软件库，用于进行高性能数值计算。可作为通用的机器学习和深度学习框架。

## 安装

[安装 TensorFlow](https://www.tensorflow.org/install/)

作为 python 库使用。需先安装 Python 3.5.x 或 3.6.x，使用附带的 pip 安装 TensorFlow。

    pip install --upgrade tensorflow

## 入门

[新手教程](https://www.tensorflow.org/get_started/get_started_for_beginners)

### 编程堆栈

![env](/assets/tensorflow_programming_environment.png)

重点 API

- Estimator
- Dataset


TensorFlow 入门





Quick ways to create a project by template

### Maven

```
mvn archetype:generate -DgroupId=com.mycompany.app -DartifactId=my-app -DarchetypeArtifactId=maven-archetype-quickstart -DarchetypeVersion=1.4 -DinteractiveMode=false

cd my-app
mvn package
java -cp target/my-app-1.0-SNAPSHOT.jar com.mycompany.app.App
```

### Vite

React

```
npm create vite@latest my-app -- --template react
```

### Chrome extensions

<https://github.com/GoogleChrome/chrome-extensions-samples>


Templates





https://tekton.dev/ 是开源的云原生的 CI/CD 系统. 

- 基于 Kubernetes, 使用 `kubectl` 命令
- 配置文件为 [Kubernets Object](https://kubernetes.io/docs/concepts/overview/working-with-objects/) 格式的 yaml 文件

## 安装

https://tekton.dev/docs/installation

### 本地安装 Kubernetes cluster

例子为 Linux Debian, 安装 minikube, docker

```
curl -LO https://storage.googleapis.com/minikube/releases/latest/minikube_latest_amd64.deb
sudo dpkg -i minikube_latest_amd64.deb

# Add Docker's official GPG key:
sudo apt-get update
sudo apt-get install ca-certificates curl
sudo install -m 0755 -d /etc/apt/keyrings
sudo curl -fsSL https://download.docker.com/linux/debian/gpg -o /etc/apt/keyrings/docker.asc
sudo chmod a+r /etc/apt/keyrings/docker.asc
# Add the repository to Apt sources:
echo   "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.asc] https://download.docker.com/linux/debian \
  $(. /etc/os-release && echo "$VERSION_CODENAME") stable" |   sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
sudo apt-get update
sudo apt-get install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin

minikube start --driver=docker --force
minikube kubectl -- get pods -A
alias kubectl="minikube kubectl --"
```

### 安装 Teckton Pipelines 

如果容器网络连接不上, 可能会卡在这里

```
kubectl apply --filename https://storage.googleapis.com/tekton-releases/pipeline/latest/release.yaml

kubectl get pods --namespace tekton-pipelines --watch
```

## 运行

### Tasks

https://tekton.dev/docs/getting-started/tasks/

```yaml
apiVersion: tekton.dev/v1beta1
kind: Task
metadata:
  name: hello
spec:
  steps:
    - name: echo
      image: alpine
      script: |
        #!/bin/sh
        echo "Hello World"

```

```
kubectl apply --filename hello-world.yaml
```

```yaml
apiVersion: tekton.dev/v1beta1
kind: TaskRun
metadata:
  name: hello-task-run
spec:
  taskRef:
    name: hello
```

```
kubectl apply --filename hello-world-run.yaml
```

查看结果

```
kubectl get taskrun hello-task-run
kubectl logs --selector=tekton.dev/taskRun=hello-task-run
```


Tekton





## 什么是 Service Worker

- [Service Workers: an Introduction](https://developers.google.com/web/fundamentals/primers/service-workers/)

- [Service Worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)

Server Worker 可以理解为是一个特殊的 JavaScript 脚本

由浏览器在后台运行，由页面触发又独立于页面的 JavaScript 脚本。可以提供推送通知、后台同步、处理页面请求提供缓存等功能。优化了页面的离线体验。

特点：

- 是一个可编程的网络代理，可以处理网络请求

- 独立异步的线程。与页面通过`postMessage`交互，由页面去控制 DOM

- 会自动按需停止和启动。涉及持久化时可以使用 IndexedDB API

- 大量使用 Promise API

- 事件驱动

### 生命周期

![](/assets/sw_lc.png)

## 一个 Service Worker 实现请求缓存的例子

### 准备

- 确定浏览器支持

- 站点部署需要支持 HTTPS，开发时可以直接用 localhost

- 入口文件：`index.js` (注册 `sw.js`)

- Service Worker 文件：`sw.js` (实现具体功能, 名字可以任意, 例如 service-worker.js)

## 注册 Servcie Worker 文件 sw.js

入口文件 index.js 
```javascript
if ('serviceWorker' in navigator) {
  window.addEventListener('load', function () {
    navigator.serviceWorker.register('/sw.js').then(function (registration) {
      // Registration was successful
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function (err) {
      // Registration failed :(
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}
```

Service worker 文件 sw.js 所在的路径决定了接收 fetch 事件的作用域

## 实现 Service Worker 文件 sw.js

`Service Worker`文件 sw.js 可以使用一些专有关键字：实例`self`，缓存`caches`。通过`self`可以监听特定的事件`addEventListener`。

### 测试 

Service Worker 文件 sw.js
```javascript
console.log('hello from Service Worker', self, caches)
```

### 添加缓存

在`intall`时启用缓存，在`fetch`时先检查缓存是否匹配。当用户打开或刷新页面时，会触发`fetch`事件。

Service Worker 文件 sw.js
```javascript
const CACHE_NAME = 'my-site-cache-v1';
const urlsToCache = [
  '/', 
  '/asset',
  '/main.css',
  '/main.js', 
];

self.addEventListener('install', function (event) {
  event.waitUntil(
    caches.open(CACHE_NAME).then(function (cache) {
      return cache.addAll(urlsToCache);
    })
  )
});

self.addEventListener('fetch', function (event) {
  event.respondWith(
    caches.match(event.request).then(function (response) {
      // Cache hit - return response
      if (response) {
        return response;
      } else {
        return fetch(event.request);
      }
    })
  )
});
```

- 查看安装的 Service Worker

    - Devtools > Application > Application > Service Workers

    - `chrome://inspect/#service-workers`

- 查看添加的缓存

    - Devtools > Application > Cache Storage > `CACHE_NAME`

> 缓存的内容需要调用`caches`接口来更新和删除，也可能直接被浏览器清理。

### 动态添加缓存

成功的请求，拷贝后放入缓存
```javascript
self.addEventListener('fetch', function (event) {
  event.respondWith(
    caches.match(event.request).then(function (response) {
      if (response) {
        return response;
      } else {
        return fetch(event.request).then(function (response) {
          // Check if we received a valid response
          if (!response || response.status !== 200 || response.type !== 'basic') {
            return response;
          }

          // IMPORTANT: Clone the response. A response is a stream
          // and because we want the browser to consume the response
          // as well as the cache consuming the response, we need to 
          // clone it so we have two streams.
          const responseToCache = response.clone();
          caches.open(CACHE_NAME).then(function (cache) {
            cache.put(event.request, responseToCache);
          });

          return response;
        })
      }
    })
  )
})
```

### 缓存策略

可以对`event.request`等条件进行过滤，按需添加缓存。

根据 Network，Cache，update 和 refresh 的组合和优先级形成不同的缓存策略。

## [Workbox](https://developers.google.com/web/tools/workbox): 构建 Progressive Web Apps（PWA） 的库

[参考：Workbox 介绍](./workbox-intro.md)

## 配合框架使用

前端框架脚手架的 PWA 库可以借助 workbox 自动生成 Service Worker / PWA 相关代码。

一般默认在生产模式下启用。使用缓存优先策略。缓存静态文件(static site assets)，不会缓存跨域的请求如 API requests，images，embeds 等。

- Vue-cli: [@vue/cli-plugin-pwa](https://cli.vuejs.org/core-plugins/pwa.html#vue-cli-plugin-pwa)

    `vue add pwa`

- Create React App: [Making a Progressive Web App](https://create-react-app.dev/docs/making-a-progressive-web-app/)

    - npx create-react-app my-app --template cra-template-pwa
    - Switch `serviceWorker.unregister()` to `serviceWorker.register()`

- Nexst.js: [next-pwa](https://github.com/shadowwalker/next-pwa)

    ```
    npm i next-pwa
    ```

    next.config.js（默认开发和生产模式都会启用）

    ```javascript
    const withPWA = require('next-pwa');

    module.exports = withPWA({
      pwa: {
        // disable: process.env.NODE_ENV === 'development',
        // dest: 'public'
      }
    });
    ```


Service Worker 入门





[Selenium](https://www.selenium.dev/documentation/en/) 是流行的浏览器自动化框架，包含了很多库和工具。常被用于端到端的测试，可以配合 [mocha](https://github.com/mochajs/mocha)、[chai](https://github.com/chaijs/chai) 等测试库使用。

Selenium 使用 WebDriver 让一套代码能运行于多个主要浏览器。

## Example

```javascript
const {Builder, By, Key, until} = require('selenium-webdriver')

async function example() {
  const driver = await new Builder().forBrowser('chrome').build()
  try {
    await driver.get('https://cn.bing.com')
    await driver.findElement(By.name('q')).sendKeys('selenium', Key.ENTER)
    const firstResult = await driver.wait(until.elementLocated(By.css('h2')), 10000)
    console.log(await firstResult.getAttribute('textContent'))
  } finally {
    driver.quit()
  }
}

example()
```

保存为文件 `test.js`，运行

```javascript
node test.js
```

## Install

### Selenium webdriver

用于控制浏览器的驱动，提供多种语言的接口。以 JavaScript 为例

```
npm i selenium-webdriver
```

### Driver binaries

下载对应浏览器的 driver 二进制文件，添加到系统路径。版本需要随着浏览器版本一起更新。

以 Chrome 为例：https://chromedriver.storage.googleapis.com/index.html

## Getting started with WebDriver

### Locating elements

WebDriver 基本功能之一是[定位页面元素](https://www.selenium.dev/documentation/en/getting_started_with_webdriver/locating_elements/)。

使用`driver.findElement`，`By`等接口

```javascript
const {By} = require('selenium-webdriver')
const result = driver.findElement(By.css('h2'))

```

判断元素是否存在

```javascript
const elements = await driver.findElements(By.css('#id'))
const hasElement = elements.length
```

`By.[css|xpath|name|...]()`

| Locator           | Description                                                                                                                                           |
|-------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| class name        | Locates elements whose class name contains the search value (compound class names are not permitted)                                                  |
| css selector      | Locates elements matching a CSS selector                                                                                                              |
| id                | Locates elements whose ID attribute matches the search value                                                                                          |
| name              | Locates elements whose NAME attribute matches the search value                                                                                        |
| link text         | Locates anchor elements whose visible text matches the search value                                                                                   |
| partial link text | Locates anchor elements whose visible text contains the search value. If multiple elements are matching, only the first one will be selected. |
| tag name          | Locates elements whose tag name matches the search value                                                                                              |
| xpath             | Locates elements matching an XPath expression                                                                                                         |

### Perform actions

获取元素后可以执行相关的操作

#### 发送按键来模拟用户输入

```javascript
await driver.findElement(By.name('q')).sendKeys('selenium', Key.ENTER)
```

#### 拖放元素（drag and drop）

```javascript
const actions = driver.actions({ bridge: true })
const source = driver.findElement(By.id('source'))
const target = driver.findElement(By.id('target'))
await actions.dragAndDrop(source, target).perform()
```

#### 点击元素
```javascript
driver.findElement(By.css('input[type="submit"]')).click()
```

## WebDriver

[WebDriver](https://www.selenium.dev/documentation/en/webdriver/) 负责通过各种方式与浏览器交互。

### 术语（terminology）

- API: 命令。The commands to manipulate WebDriver.
- Libary：代码模块。A code module which contains the APIs and the code.
- Driver: 浏览器驱动。Responsible for controlling the actual browser.
- Framework: 整体环境。A support for WebDriver suites

### 各组件关系（component）

最简单的情况，WebDriver 直接调用 driver 来控制对应的浏览器。

![](/assets/webdriver-basic.png)

也可以借助 Remote WebDriver, selenium Server or Grid 等间接调用 driver。

比较复杂的情况, 测试框架（Test Framework）负责运行 WebDriver 相关的测试步骤。

调用关系为 `The Test Framework <-> WebDriver <-> ... <-> Driver <-> Browser`

![](/assets/webdriver-complex.png)

## Browser manipulation

[Browser manipulation](https://www.selenium.dev/documentation/en/webdriver/browser_manipulation/)

通过 WebDriver 启动浏览器后，可以模拟用户进行各种操作。

- Browser navigation

    ```javascript
    await driver.get('https://selenium.dev')

    await driver.navigate().back()
    await driver.navigate().forward()
    await driver.navigate().refresh()

    await driver.getCurrentUrl()
    await driver.getTitle()
    ```
- Windows and tabs
- Frames and Iframes
- Window management
- Set window position

## Waits

[Waits](https://www.selenium.dev/documentation/en/webdriver/waits/)

浏览器有很多异步操作修改 DOM 的状态。为了确保 WebDriver 获取到正确的 DOM 状态，需要在一定程度上控制异步的流程。Waits 可以让当前进程一直等待，条件满足后再执行后续流程。

### Explicit wait

显式的等待，可用于 imperative, procedural language（命令式、过程式语言）。可以暂停或冻结进程，定时检查继续的条件是否满足。适合于同步浏览器和 DOM 的状态到脚本。

使用`driver.wait`，可以指定最大等待时间（timeout）
```javascript
await driver.get('file///path/to/test.html')

const isInitialised = () => 
  driver.executeScript('return initialised')

await driver.wait(isInitialised, 2000)
const element = driver.findElement(By.css('p'))
```

配合`until`的方法可以写得更简洁
```javascript
const {By, until} = require('selenium-webdriver')

const element = await driver.wait(
  until.elementLocated(By.css('p')), 
  2000,
) 
```

`test.html` 中的模拟脚本
```javascript
let initialised = false
window.addEventListener('load', function () {
  setTimeout(() => {
    const newElement = document.createElement('p')
    newElement.textContent = 'Hello from JavaScript!'
    document.body.appendChild(newElement)
    initialised = true
  }, 500)
})
```

### Implicit wait
隐式等待。设置间隔后，WebDriver 每次获取 DOM 元素时，如果不存在，等待一定间隔后会重新尝试。默认为`0`, 不启用。

```javascript
driver.manage().setTimeouts({ implicit: 10000 })

await driver.get('file:///Users/apple/files/html/tmp.html')
const element = driver.findElement(By.css('p'))
```

### FluentWait
弹性等待。同时设置最大等待时间和检查条件的间隔。

```javascript
// Waiting 30 seconds for an element to be present on the page, 
// checking for its presence once every 5 seconds
const element = await driver.wait(
  until.elementLocated(By.css('p')), 
  30000, 
  'Timed out after 30 seconds', 
  5000
) 
```

## Web element

[WebElement](https://www.selenium.dev/documentation/en/webdriver/web_element/) 对象代表了一个 DOM element。可以通过 WebDriver 或其它 WebElement 来查找。条件包括 ID, Name, Class, XPath, CSS Selectors, link Text, etc.

主要组合使用`findElement()`和`By.[css|xpath|name|...]()`

- [Xpath cheatsheet](https://devhints.io/xpath)

### Find Element

```javascript
const element = driver.findElement(By.name('q'))
```

### Find Elements

```javascript
const elements = await driver.findElements(By.name('q'))
for(let e of elements) {
  console.log(await e.getText())
}
```

### Find Element/Elements from Element

调用同样的方法，查找已有 WebElement 的子元素

### Get Active Element

获取当前焦点所在的元素
```javascript
await driver.switchTo().activeElement().getAttribute('title')
```

### Is Element Enabled

```javascript
await driver.findElement(By.name('btn')).isEnabled()
```

### Is Element Selected

This method is widely used on Check boxes, radio butotns, input elements, and option elements.

```javascript
await driver.findElement(By.css("input[type='checkbox']:last-of-type")).isSelected()
```

### Get Element TagName

```javascript
await driver.findElement(By.css('h1')).getTagName()
```

### Get Elment Rect

```javascript
await driver.findElement(By.css('h1')).getRect()
```

### Get Element CSS Value

```javascript
await driver.findElement(By.css('h1')).getCssValue('color')
```

## Keyboard

[Keyboard](https://www.selenium.dev/documentation/en/webdriver/keyboard/) 代表了键盘相关的事件，用来模拟输入。

### sendKeys

模拟发送连续的按键

```javascript
await driver.findElement(By.name('q')).sendKeys('selenium', Key.ENTER)
```

### keyDown

模拟按下 modifier key（CONTROL, SHIFT, ALT, COMMAND, ...）

```javascript
await driver.actions().keyDown(Key.CONTROL).sendKeys('a').perform()
```

### keyUp

模拟释放 modifier key（CONTROL, SHIFT, ALT, COMMAND, ...）

```javascript
const search = driver.findElement(By.name('q'))
await driver.actions().click(search)
  .keyDown(Key.SHIFT).sendKeys('qwerty')
  .keyUp(Key.SHIFT).sendKeys('qerty').perform()
```
## clear

This is only applied for the elements which are **editable and interactable**

```javascript
await search.clear()
```

## Cookie

```javascript
const cookies = await driver.manage().getCookies()
console.log(cookies)
```

## Selenium Grid

Selenium Grid 支持使用 remote driver 远程调用

```java
new RemoteWebDriver(new URL(seleniumUrl), options)
```

同时通过 seleniumUrl 也可以访问 web ui, 根据 session id 来查看对应 session 的实时页面 (仅开发模式)

```java
((RemoteWebDriver) driver).getSessionId()
```


Selenium 自动化框架



 

## 介绍

[30-seconds-of-css/](https://atomiks.github.io/30-seconds-of-css/) 

[30-seconds-of-code](https://github.com/Chalarangelo/30-seconds-of-code)

收集了很多可以在30秒内理解的代码片段（CSS 和 JavaScript）。


秒懂代码




## 介绍
Https 协议，是在原有 HTTP 基础上，通过 SSL/TLS 对数据包进行加密。并提供对网站服务器的身份认证。

[https://letsencrypt.org/](https://letsencrypt.org/) 提到了免费支持 Https 的多种解决方案。

[certbot 不同代理软件和系统的配置方法](https://certbot.eff.org/lets-encrypt/centosrhel7-nginx) 适用于有 shell 权限的情况。

## 使用

环境：CentOS/RHEL 7，Nginx

步骤：

1. 安装 Certbot（先启用 EPEL 安装源）

        sudo yum install certbot python2-certbot-nginx

1. 启动 Certbot 认证

        sudo certbot --nginx

1. 认证有效期 90 天，需要定时更新

        certbot renew

### crontab 定时更新

进入编辑模式

    crontab -e 

然后输入任务

    0 0,12 * * * python -c 'import random; import time; time.sleep(random.random() * 3600)' && certbot renew

### Challenge failed

一种情况是运行了多个 nginx 进程，导致验证网址时出错。查看

```
ps -ef|grep nginx
```


让网站支持 Https




### 浏览器

1.Chrome

修改 Chrome 插件: JavaScrit Errors Notifier

2.Firefox

模拟 Vim 浏览网页：pentadactyl

### 编辑器

- gVim
- Emacs
- Atom
- Sublime
- VS Code

### 生产力工具

- AutoHotKey
- Launchy
- WindowsTab

### 前端

#### 预编译语言

- CoffeeScript => JavaScript
- TypeScript => JavaScript
- Pug(Jade) => HTML
- Less/Sass => CSS

#### 框架、库

- jQuery
- Bootstrap
- AngularJS
- React
- Vue

### 后端

- NodeJS
- Python
- C++


个人技能树




## 介绍
SweetAlert 已经升级。此处引用原 SweetAlert1 官方仓库文档，作为记录。

## 原文档

SweetAlert [![Build Status](https://travis-ci.org/t4t5/sweetalert.svg?branch=master)](https://travis-ci.org/t4t5/sweetalert)
==========

An awesome replacement for JavaScript's alert.

![A success modal](https://raw.github.com/t4t5/sweetalert/master/sweetalert.gif)

[See it in action!](http://t4t5.github.io/sweetalert)

[Learn how to use it!](https://www.ludu.co/lesson/how-to-use-sweetalert)


Usage
-----

You can install SweetAlert through bower:

```bash
bower install sweetalert
```

Or through npm:

```bash
npm install sweetalert
```

Or through Ruby Gem:
```ruby
gem 'sweet_alerts'
```
And then execute:

$ bundle

add below line to application.js
```ruby
  //= require sweetalert.min
```
add below line to application.css
```ruby
  *= require sweetalert
```
Alternatively, download the package and reference the JavaScript and CSS files manually:

```html
<script src="dist/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="dist/sweetalert.css">
```
**Note:** If you're using an older version than v1.0.0, the files are `lib/sweet-alert.min.js` and `lib/sweet-alert.css`


Tutorial
--------

The easiest way to get started is follow the [SweetAlert tutorial on Ludu](https://www.ludu.co/lesson/how-to-use-sweetalert)!


Examples
--------

The most basic message:

```javascript
swal("Hello world!");
```

A message signaling an error:

```javascript
swal("Oops...", "Something went wrong!", "error");
```

A warning message, with a function attached to the "Confirm"-button:

```javascript
swal({
  title: "Are you sure?",
  text: "You will not be able to recover this imaginary file!",
  type: "warning",
  showCancelButton: true,
  confirmButtonColor: "#DD6B55",
  confirmButtonText: "Yes, delete it!",
  closeOnConfirm: false,
  html: false
}, function(){
  swal("Deleted!",
  "Your imaginary file has been deleted.",
  "success");
});
```

A prompt modal where the user's input is logged:

```javascript
swal({
  title: "An input!",
  text: 'Write something interesting:',
  type: 'input',
  showCancelButton: true,
  closeOnConfirm: false,
  animation: "slide-from-top"
}, function(inputValue){
  console.log("You wrote", inputValue);
});
```

Ajax request example:

```javascript
swal({
  title: 'Ajax request example',
  text: 'Submit to run ajax request',
  type: 'info',
  showCancelButton: true,
  closeOnConfirm: false,
  disableButtonsOnConfirm: true,
  confirmLoadingButtonColor: '#DD6B55'
}, function(inputValue){
  setTimeout(function() {
    swal('Ajax request finished!');
  }, 2000);
});
```

[View more examples](http://t4t5.github.io/sweetalert)


Themes
------

SweetAlert can easily be themed to fit your site's design. SweetAlert comes with three example themes that you can try out: **facebook**, **twitter** and **google**. They can be referenced right after the intial sweetalert-CSS:
```html
<link rel="stylesheet" href="dist/sweetalert.css">
<link rel="stylesheet" href="themes/twitter/twitter.css">
```


Browser compatibility
---------------------

SweetAlert works in most major browsers (yes, even IE). Some details:

- **IE8**: (Dropped since v1.0.0-beta)
- **IE9**: Works, but icons are not animated.
- **IE10+**: Works!
- **Safari 4+**: Works!
- **Firefox 3+**: Works!
- **Chrome 14+**: Works!
- **Opera 15+**: Works!


Contributing
------------

If you want to contribute:

- Fork the repo

- Make sure you have [Node](http://nodejs.org/), [NPM](https://www.npmjs.com/) and [Gulp](http://gulpjs.com/) installed. When in the SweetAlert directory, run `npm install` to install the dependencies. Then run `gulp` while working to automatically minify the SCSS and JS-files.

- Keep in mind that SweetAlert uses Browserify in order to compile ES6-files. For easy debugging, make sure you reference the file `dist/sweetalert-dev.js` instead of `sweetalert.js`.

- After you're done, make a pull request and wait for approval! :)


Related projects
----------------

* [SweetAlert for Android](https://github.com/pedant/sweet-alert-dialog)
* [SweetAlert for Bootstrap](https://github.com/lipis/bootstrap-sweetalert)
* [SweetAlert for AngularJS](https://github.com/oitozero/ngSweetAlert)
* [SweetAlert for RubyOnRails](https://github.com/sharshenov/sweetalert-rails)



SweetAlert1 文档





## 介绍

应用经历开始、运行中到结束，可以抽象成状态的一系列演变。把状态提取出来集中进行管理，有利于准确理解和实现相关的逻辑。

## 状态管理解决方案

### Redux

成熟，但比较复杂，需要理解较多的概念。通常搭配 React。

### Vuex

Vue 的状态管理方案。

### reworm

新出的，以简单的方式管理状态。


应用状态管理





## 介绍

[Svelte][0] 是一个编译器型的 web 框架。拥有简化语法和高性能，最终编译成纯 JavaScript，自带响应式状态管理。

> svelte (adj): slender and elegant

## 例子

[Examples](https://svelte.dev/examples#hello-world)

```html
<script>
  let name = 'world';
</script>

<h1>Hello {name}!</h1>
```

## 使用

degit 是基于 git 的工具，仅下载最新版本的代码。

    # rollup
    npx degit sveltejs/template svelte-app

    # webpack
    npx degit sveltejs/template-webpack svelte-app

    cd svelte-app
    npm install
    npm run dev

## 语法

框架基于 `.svelte` 文件，类似 Vue 的 `.vue` 文件。

[API docs](https://svelte.dev/docs)

### COMPONENT FORMAT

`<script context="module">`, `<script>`, `<style>`

### TEMPLATE SYNTAX

- Tags

- Attributes and props

- Text expression

- Control flow

        {#if ...}
        {#each ...}
        {#await ...}
        {@html ...}

- Inline style

    ```html
    <div style="top: {top}px"></div>
    ```
    
- Element directives

    - use:action
        
        ```
        action = (node: HTMLElement, parameters: any) => {
            update?:  (parameters: any) => void,
            destroy?: () => void
        }
        ```
    
        action 是函数，当元素创建时调用。可以带参数，返回带 update 方法的对象，那么当参数变化且应用到元素后，update 方法会被调用。可以看成属于特定元素的生命周期函数。

### RUNTIME

### COMPILE TIME

## 构建通用组件

[component-template](https://github.com/sveltejs/component-template) 是通用组件的模板，基于该模板构建组件后可以发布到 npm 。svelte 项目安装后可以直接使用。

## Svelte-kit

[svelte-kit][2] 是基于 Svelte (UI 框架) 的 Web 框架，同时具有服务端渲染和快速路由切换等优势。

### 使用

需要 node 版本 > `12.20 || 14.13`

```
npm init svelte@next my-app
cd my-app
npm install
npm run dev -- --open
```

[0]: https://svelte.dev/
[1]: https://sapper.svelte.dev/
[2]: https://kit.svelte.dev/


Svelte 框架介绍





## 介绍

[Svelte-native][0] 是使用 [Svelte][1] ，基于 [NativeScript][2] 来开发移动应用的框架。

## 开始

    npm install -g nativescript
    npx degit halfnelson/svelte-native-template my-mobile-app
    cd my-mobile-app

    npm install
    tns run ios
    # or
    tns run android

本地预览和调试还需要安装相关设备模拟器。也可以选择云端调试。

[0]: https://svelte-native.technology/
[1]: https://svelte.dev/
[2]: https://www.nativescript.org/


Svelte-native 介绍





## 介绍

SVN 作为版本控制工具，与 Git 相比，在企业 Java 开发中使用较多。有中心化，分角色按目录授权等特性。

## 安装

Linux 可以使用包管理工具，例如 `yum`, `apt`。会同时安装服务端和客户端。

    yum install subversion
    apt install subversion

Windows7 可以安装 [TortoiseSVN](https://tortoisesvn.net/downloads.zh.html)

## 建立 svn 仓库

新建目录

    mkdir /test

新建仓库

    svnadmin create /test/project

查看目录

    ls /test/project/

    README.txt  conf  db  format  hooks  locks

其中`conf`包含了仓库的配置信息

## 配置

查看配置文件

    ls /test/project/conf

    authz  passwd  svnserve.conf

编辑 svnserve.conf。默认授权匿名用户只读（read），授权用户读写（write）。
可以设置匿名用户为 none 来禁止访问。

    vi /test/project/conf/svnserve.conf

```ini
[general]
# anon-access = read
anon-access = none
# auth-access = write

# 启用密码
password-db = passwd

# 启动路径访问权限
authz-db = authz
```

添加用户密码

    vi /test/project/conf/passwd

    [users]
    admin = 123456

添加用户路径权限

    vi /test/project/conf/authz

    # 目录对应的用户权限
    [/]
    admin = rw

## 启动

    svnserve -d -r /test/project

## 客户端访问

假设 svnserve 所在服务器 IP 为 `1.2.3.4`，那么对应的 svn 地址为 `svn://1.2.3.4`。

客户端以 Windows7 为例。其它系统可以直接使用`svn`命令。

### 图形界面

在文件夹空白处，右键菜单选择 SVN Checkout，填入 svn 地址，确定。再进行后续操作。

### 命令行

(将 TortorseSVN/bin/svn.exe 加入系统路径)

    mkdir test
    cd test

    svn checkout svn://1.2.3.4 --username admin

提交文件

    touch tmp.txt

    svn add tmp.txt

    svn commit -m 'add tmp.txt'

更新

    svn update


## 参考
[https://my.oschina.net/lionel45/blog/298305](https://my.oschina.net/lionel45/blog/298305)


SVN 服务器、客户端安装使用





## Overview

[Tableau](https://www.tableau.com/) /ˌtaˈblō/ can help anyone see and understand their data. Connect to almost any database, drag and drop to create visualizations, and share with a click.

### Tableau Platform

![tableau](/assets/tableau.png)

## Resources

- Learn: https://www.tableau.com/learn
- Search: https://www.tableau.com/search

## Perforamnce

### The Performance Recording feature

You can view performance metrics in a workbook that Tableau creates after recording

- Query execution
- Compiling query
- Geocoding
- Connections to data sources
- Layout computations
- Extract generation
- Blending data
- Server rendering (Tableau Server only)


### Create a performance recording in Tableau Desktop


Tableau




ssh 每次登录要输入密码。可以在登录客户机 client 生成密钥对。将公钥放到目标主机 host 上，实现直接登录。
    
## 生成密钥对

**client**

    $ ssh-keygen

会在目录 ~/.ssh 中生成 `id_rsa` 和 `id_rsa.pub`。

## 复制公钥

**client**

    $ ssh <user>@<host> "mkdir -p .ssh && cat >> .ssh/authorized_keys" < ~/.ssh/id_rsa.pub

命令解释

1. `ssh <user>@<host>`：

    以 user 身份登录主机 host

1. `"mkdir -p .ssh && cat >> .ssh/authorized_keys"`：

    登录后将公钥添加到文件 authorized_keys 中（若目录不存在则先创建）

1. `< ~/.ssh/id_rsa.pub`： 

    将本地公钥重定向到上一步命令的输入

## 问题：[centos7] Authentication refused: bad ownership or modes for file...

### 背景
ssh 公钥登录失败，在目标主机 host 重启 sshd 调试

    service sshd stop
    /usr/sbin/sshd -ddd

发现报错

> Authentication refused: bad ownership or modes for file /home/user/.ssh/authorized\_keys

### 解决
新版 ssh 要求 .ssh 及其中的文件只能有当前用户的读写权限，根据网络资料，修改如下

    chmod g-w /home/your_user
    chmod 700 /home/your_user/.ssh
    chmod 600 /home/your_user/.ssh/authorized_keys

## 参考

[SSH 原理与应用](http://www.ruanyifeng.com/blog/2011/12/ssh_remote_login.html)
[SSH Authentication Refused](https://www.daveperrett.com/articles/2010/09/14/ssh-authentication-refused/)


ssh 公钥免密登录




## ssh 后执行命令

```
ssh name@host -o RemoteCommand="cd .. && bash"
```

## 禁用密码登录
个人云服务经常有人用 ssh 不断尝试连接登录。异常登录日志可以通过`/var/log/secure`查看。

### 解决
1. 需要登录的客户端机器上配置密钥登录, [ssh 公钥免密登录](article/ssh_key.md)

1. 服务器配置禁用密码登录，配置`/etc/ssh/sshd_config`

        PasswordAuthentication no

    重启 ssh 服务

        service sshd restart

## 一段时间后自动掉线

客户端连服务器后，一段时间没有动作会自动掉线

### 解决

设置间隔 240 秒向指定的服务器发送连接信号

在客户端配置文件`~/.ssh/config`

    Host *
    ServerAliveInterval 240

## 连接慢

增加 `-v` 参数，发现一直卡在 gssapi-with-mic 这步

### 解决

打开(远程服务器) /etc/ssh/sshd_config（注意是文件 /etc/ssh/ssh**d**_config 而不是 /etc/ssh/ssh_config），

1. 把里面的 GSSAPIAuthentication yes 改成 no；

2. 把里面的 UseDNS yes 改成 no；

3. /etc/init.d/sshd restart 重启sshd进程使配置生效。

[原文](http://www.cnblogs.com/arccosxy/p/4942027.html)


ssh tips





## 命令行客户端

### mycli（MySQL client）

[mycli](https://github.com/dbcli/mycli) 是 MySQL 带自动补全和语法高亮的命令行客户端。

安装

    pip install -U mycli

### 官方安装包

以 Windows7, MySQL 为例，客户端与服务端打包在一起，需要下载整个包。

- 下载 <https://dev.mysql.com/downloads/mysql>

- 解压后运行`/bin/mysql`，连接数据库

        mysql -u <username> --host=<host_address> --port=<port> --password="<password>" [db_name]

    例子

        mysql -u user_test --host=127.0.0.1 --port=3318 --password="MyPass*!" db_test
        

> Windows 下如果密码包含了特殊字符，需要在命令中用双引号`"`括起来


### SQL 相关

MySQL 查询语句后加`\G`，以表单的方式查看数据

```sql
select * from table\G;
```

## 图形化客户端

### TablePlus

[TablePlus](https://tableplus.io/)

> 免费/收费

### Navicat

[Navicat Premium](https://www.navicat.com/en/products/navicat-premium)

> 收费


SQL 数据库客户端





## 介绍

Why Spring?

> Spring makes programming Java quicker, easier, and safter for everybody. Spring's focus on speed, simplicity, and productivity has made it the world's most popular java framework.

Spring 用于快速有效地构建应用。是一套项目基础模板和工具。

- [Spring Boot](https://spring.io/projects/spring-boot) 是一个快速启动 Spring、打包第三方库、减少配置的基础框架。

## [Quickstart Guide](https://spring.io/quickstart)

### 创建新的 Spring Boot 项目

使用 [Spring Initializr | https://start.spring.io](https://start.spring.io/) 图形界面设置和创建项目。

添加依赖`Spring Web`, 点击`Generate`按钮，下载并解压 zip 文件。

### 添加代码

添加路由`/helllo`，处理参数和返回值

`src/main/java/com/example/demo/DemoApplication.java`
```java
package com.example.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

@SpringBootApplication
@RestController
public class DemoApplication {

    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }

    @GetMapping("/hello")
    public String hello(@RequestParam(value="name", defaultValue="World") String name) {
        return String.format("Hello %s", name);
    }
}
```

### 启动项目

项目下运行命令

    ./mvnw spring-boot:run

打开网页`localhost:8080/hello?name=User`，可以看到相应结果。

## Spring Boot Devtools

使用 devtools，当修改文件后重新 compile，自动重启项目

添加有依赖到 `pom.xml`

```xml
<dependencies>
  <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-devtools</artifactId>
      <optional>true</optional>
  </dependency>
</dependencies>
```

运行命令

    ./mvnw spring-boot:run

修改 src 下的 java 文件

新的终端中运行命令

    ./mvnw compile

### inotifywait

可以检测文件变化实现自动 compile 和 restart

Ubuntu 为例

```
sudo apt install inotify-tools
```

`dev.sh`
```
#!/bin/bash

monitor() {
inotifywait -m -e create -e modify -e delete -e delete_self -e move $1 |
  while read path action file; do
    if [[ "$file" =~ .*java$ ]]; then
      ./mvnw compile
    fi
  done
}

monitor  "./src/main/java/com/example/demo" &

./mvnw spring-boot:run
```

### fswatch

<https://github.com/emcrisostomo/fswatch>

```
sudo apt install fswatch
```

```
#!/bin/bash

monitor() {
  fswatch -0 $1 | while read -d "" event;
    do
      ./mvnw compile
    done
}

monitor  "./src/main" &

./mvnw spring-boot:run
```

## [RESTful Web Service](https://spring.io/guides/gs/rest-service/)

### 目标

创建服务，访问`http://localhost:8080/greeting`返回 JSON 数据
```json
{"id": 1, "content": "Hello, World!"}
```

访问`http://localhost:8080/greeting?name=User`返回 JSON 数据
```json
{"id": 1, "content": "Hello, User!"}
```

### 依赖

- [JDK 1.8](http://www.oracle.com/technetwork/java/javase/downloads/index.html) or later
- [Gradle 4+](http://www.gradle.org/downloads) or [Maven 3.2+](https://maven.apache.org/download.cgi)

### 创建新的 Spring Boot 项目

使用 [Spring Initializr | https://start.spring.io](https://start.spring.io/) 图形界面设置和创建项目。

添加依赖`Spring Web`, 点击`Generate`按钮，下载并解压 zip 文件。

### 添加代码

添加数据结构模型

`src/main/java/com/example/demo/Greeting.java`
```java
package com.example.demo;

public class Greeting {
    private String name;

    public Greeting(String name) {
        this.name = name;
    }

    public String getName() {
        return name;
    }
}
```

添加 Controller 来处理请求

`src/main/java/com/example/demo/GreetingController.java`
```java
package com.example.demo;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class GreetingController {

    @GetMapping("/greeting")
    public Greeting greeting(@RequestParam(value="name", defaultValue="World") String name) {
        return new Greeting(name);
    }
}
```

### 启动项目

项目下运行命令

    ./mvnw spring-boot:run

打开网页`localhost:8080/greeting`，可以看到相应结果。

#### 打包后运行

    ./mvnw clean package
    java -jar target/demo-0.0.1-SNAPSHOT.jar

### 返回数组例子

```java
package com.example.demo;

import java.util.concurrent.atomic.AtomicLong;
import java.util.List;
import java.util.ArrayList;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class GreetingController {
  private static final String template = "Hello, %s!";
  private final AtomicLong counter = new AtomicLong();

  @GetMapping("/greetings")
  public List<Greeting> greetings(@RequestParam(value="name", defaultValue="World") String name) {
    List<Greeting> greetings = new ArrayList<Greeting>();
    greetings.add(new Greeting(counter.incrementAndGet(), String.format(template, name)));
    greetings.add(new Greeting(counter.incrementAndGet(), String.format(template, name)));

    return greetings;
  }
}
```

## [Serving Web Content with Spring MVC](https://spring.io/guides/gs/serving-web-content/)


Java Spring 入门





## vosk

- <https://github.com/alphacep/vosk-api>
- <https://github.com/alphacep/vosk-server>

### Vosk Server

Server: requires about `8G` memory or more.

```
docker run -d -p 2700:2700 alphacep/kaldi-en:latest
```

Client
```
git clone https://github.com/alphacep/vosk-server
cd vosk-server/websocket
./test.py test.wav
```

Client with microphone
```
pip3 install sounddevice
./test_microphone.py -u ws://localhost:2700
```

## Julius

<https://github.com/julius-speech/julius>

### Build

```
git clone https://github.com/julius-speech/julius.git
cd julius
```

Fix for macOS: Add belowto `libsent/src/adin_mic_darwin_coreaudio.c`
```c
#include <sent/stddefs.h>
```

```
./configure --enable-words-int
make -j4
```

### Run

Download [JuliusModel](https://sourceforge.net/projects/juliusmodels/files/) named `ENVR-v5.4.Dnn.Bin.zip`

```
unzip ENVR-v5.4.Dnn.Bin.zip
cd ENVR-v5.4.Dnn.Bin
```

Edit config file `dnn.jconf`

```
-feature_options -htkconf wav_config -cvn -cmnload ENVR-v5.3.norm -cmnstatic
+feature_options -htkconf wav_config -cvn -cmnload ENVR-v5.3.norm -cvnstatic

+state_prior_log10nize false
```

Recognize audio file

```
../julius/julius/julius -C julius.jconf -dnnconf dnn.jconf
```

Edit `test.dbl` to test with other audio files.


Speech to text





## Structurizr DSL

基于 C4 model，使用文本化的领域特定语言（DSL），创建可视化的软件架构模型。

- [Structurize DSL](https://github.com/structurizr/dsl)
- [C4 model](https://c4model.com/)

### Example

```ruby
workspace {

    model {
        user = person "User"
        softwareSystem = softwareSystem "Software System"

        user -> softwareSystem "Uses"
    }

    views {
        systemContext softwareSystem {
            include *
            autolayout
        }

        theme default
    }
    
}
```

### Result

<https://structurizr.com/dsl?example=getting-started>

<iframe title="example-getting-started" src="https://structurizr.com/dsl?example=getting-started" target="_parent"></iframe>

### Other examples
- [Example: big-bank-plc](https://structurizr.com/dsl?example=big-bank-plc)


Software architecture





## 介绍

[omi][0] 是使用 shwdow DOM 和 web components 技术的 web 框架。那么这两类技术都是关于什么的呢？ 

[Shadow DOM v1: Self-Contained Web Components][1] 作了详细的介绍，本文记录如下。


[0]: https://github.com/Tencent/omi
[1]: https://developers.google.com/web/fundamentals/web-components/shadowdom


Shadow DOM (web components)





[Usage with React](https://redux.js.org/basics/usage-with-react)

## 快速开始

    npm install redux react-redux

or

    yarn add redux react-redux

### Provider

`<Provider />`中的组件都可以读取`store`。

```javascript
import React from 'react';
import ReactDOM from 'react-dom';

import { Provider } from 'react-redux';
import store from './store';

import App from './App';

const rootElement = document.getElementById('root');
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>
)
```

### connect()

`connect`连接的组件可以读取 `store` 并 dispatch `action`

```javascript
import { connect } from 'react-redux';
import { increment, decrement, reset } from './actionCreators';

// const Counter = ...

const mapStateToProps = (state, /*, ownProps */) => {
  return {
    coutner: state.counter
  };
};

const mapDispatchToProps = { increment, decrement, reset };

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Counter);
```

## 建议顺序

### Presentation Component

负责数据展示。接近通常的 component。差别在于大部分 props 来自下一步 Container Component。

### Container Component

负责数据逻辑。包裹了 Presentation Component。

```javascript
// 映射变量型 prop
mapStateToProps(state, ownProps) => propsObject

// 映射函数型 prop，可能用到下一步定义的 actionCreator
// dispatch(actionCreator(..args))
mapDispatchToProps(dispatch, ownProps) => propsObject

// 连接
const ContainerComponent = connect(
  mapStateToProps, 
  mapDispatchToProps
)(PresentationComponent)
```
    
### action

负责 action 对象创建。返回 action 对象的 type 必填。

    actionCreator(...args) => action

### reducer

根据 state 和 action 返回更新后的 state。

    (state, action) => new_state

### root reducer

整合新增的 reducer。



在 React 中使用 Redux





## What is RethinkDB

The open-soruce database for the realtime web.

NoSQL 数据库。可以根据数据变化即时推送数据到客户端，从而更好地支持实时的网络应用。

## 安装

[Installing RethinkDB](https://rethinkdb.com/docs/install/)

For Ubuntu

```
source /etc/lsb-release && echo "deb https://download.rethinkdb.com/repository/ubuntu-$DISTRIB_CODENAME $DISTRIB_CODENAME main" | sudo tee /etc/apt/sources.list.d/rethinkdb.list
wget -qO- https://download.rethinkdb.com/repository/raw/pubkey.gpg | sudo apt-key add -
sudo apt-get update
sudo apt-get install rethinkdb
```

For CentOS 7

```
sudo cat << EOF > /etc/yum.repos.d/rethinkdb.repo
[rethinkdb]
name=RethinkDB
enabled=1
baseurl=https://download.rethinkdb.com/repository/centos/7/x86_64/
gpgkey=https://download.rethinkdb.com/repository/raw/pubkey.gpg
gpgcheck=1
EOF

sudo yum install rethinkdb
```

For MacOS

    brew update
    brew install rethinkdb

## 启动

```
rethinkdb

# Or
rethinkdb --bind all -d /path/to/data
```

默认开放端口

- 29015: 用于数据库服务链接

- 8080:  用于浏览器管理界面

## 连接

以 JavaScript 为例：

### 安装 client driver

[Installing RethinkDB client drivers](https://rethinkdb.com/docs/install-drivers/)

```bash
npm install rethinkdb
```

### 连接数据库

有 Promise 和 callback 两种使用方式。连接成功后获取 connection 用于后续和数据库交互。

```javascript
const r = require('rethinkdb')

// Default options
const connection = await r.connect({ host: 'localhost', port: 28015, database: 'test' })
```

## Backup up /restore

```
rethinkdb dump [options]

rethinkdb restore filename
```

需要 python 驱动

```
pip install rethinkdb
```

## 使用

- (JavaScript ReQL command reference)[https://rethinkdb.com/api/javascript/#]

通用的结构一般为

```
result = await r[.command(args)...].run(connection)
```

db 使用 connection 的设置，默认为`test`。也可以显式指定`db('test')`。

### create a new table

默认 primaryKey 为 `id`，自动生成。

```javascript
await r.db('test').tableCreate('authors').run(connection)
```

### Insert data

```javascript
await r.table('authors').insert({ name: 'Jean', posts: [] }).run(connection)

await r.table('authors').insert([
  { name: 'William', posts: [1, 2, 3] }, 
  { name: 'Laura', posts: [1] }, 
]).run(connection)
```

### Retrieve documents

#### All documents in a table

`cursor.toArray()`
```javascript
const cursor = await r.table('authors').run(connection)
const result = await cursor.toArray()

```
lazily iterate over the result
```javascript
cursor.next((error, row) => {})
cursor.each((error, row) => {})
```

#### Filter documents based on a condition

`filter(condition)`。`r.row('name')`代表当前查询文档的字段值

```javascript
const cursor = await r.table('authors')
  .filter(r.row('name').eq('William')).run(connection)

const result = await cursor.toArray()

const cursor = await r.table('authors')
  .filter(r.row('post').count().gt(2)).run(connection)
```

#### Retrieve documents by primary key

`get(<primary_key>)`

```javascript
const result = await r.table('authors').get(id).run(connection)
```

#### Retrieve documents by secondary index

[secondary-indexes](https://rethinkdb.com/docs/secondary-indexes/javascript/)

- `getAll(value, { index: <index_name> })`
- `getAll([primary_keys, ...])`

```javascript
await r.table('authors').indexCreate('last_name').run(connection)

const result = await r.table('authors').getAll('Smith', { index: 'last_name' }).run(connection)
```

### Update documents

`update(newValueObject)`

```javascript
await r.table('authors').update({ type: 'fictional' }).run(connection)

await r.table('authors')
  .filter(r.row('name').eq('William'))
  .update({ rank: 'Admiral' })
  .run(connection)

await r.table('authors')
  .filter(r.row('name').eq('Jean'))
  .update({ posts: r.row('posts').append(1) })
  .run(connection)
```

### Delete documents

`delete()`

```javascript
await r.table('authors')
  .filter(r.row('posts').count().lt(3))
  .delete()
  .run(connection)
```

## Ref

- [Ten-minute guide with RethinkDB and JavaScript - RethinkDB](https://rethinkdb.com/docs/guide/javascript/)
- [JavaScript API](https://rethinkdb.com/api/javascript/)

- [Cookbook](https://rethinkdb.com/docs/cookbook/javascript/)

## 扩展

[horizon](https://github.com/rethinkdb/horizon) 基于 rethinkdb 的实时后端平台，包含服务端、客户端等组件。


RethinkDB 介绍





https://medium.com/dailyjs/how-to-remove-array-duplicates-in-es6-5daa8789641c 

## Three ways

```javascript
const arr = [0, 1, 2, 0, 0, 3];

[...new Set(arr)];

arr.filter((item, index) => arr.indexOf(item) === index);

arr.reduce((accu, item) => (accu.includes(item) ? accu : [...accu, item]), []);
```


Remove Array duplicates | 数组去重





### 整个目录


将远程服务器上的文件目录映射到本地. 创建空目录 `mkdir mountpoint`

Macos: [macFUSE](https://osxfuse.github.io/). Install macFUSE (restart requred) and SSHFS from the website

    sshfs [user@]hostname:[/path/to/directory] mountpoint

Windows: [sshfs-win](https://github.com/billziss-gh/sshfs-win)

    net use Z: \\sshfs\user@hostname[\path]

Linux: [sshfs](https://github.com/libfuse/sshfs)

    sshfs [user@]hostname:[/path/to/directory] mountpoint

### 单个文件

    vim scp://user@hostname[:port]//path/to/file


映射远程文件到本地




## 介绍

页面布局时，需要设计元素的大小，能够随着页面的大小动态调整。
使用 rem 和 em， 可以由浏览器根据设置的字体大小，动态计算出对应像素值。

## 差异

### rem
基于根元素（\<HTML\>）的字体大小。默认来自于浏览器字体设置。

### em
基于使用 em 这个 css 属性的元素的字体大小。可能继承于父元素。


rem 和 em 





## 介绍

[Redux][2] 是可预测的状态容器，用于 JavaScript apps。可以和 React 以及其他前端库配合使用。

类似的状态管理库还有 [mobx][3]。

### 核心概念和例子

概念：**store**, **reducer**, **action**

关系：用户通过 UI 触发 action，通过 reducer 修改 store 中的 state。state 定义 UI。

           defines        triggers           sent to               updates
    State ----------> UI ----------> Actions ----------> Reducer ----------> Store
      ^                                                                        |
      |                                                                        |
       ------------------------------------------------------------------------
                                    contains


例子：

```javascript
import { createStore } from 'redux';

/**
 * This is a reducer, a pure function with (state, action) => state signature.
 */
function counter(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT': 
      return state - 1;
    default: 
      return state;
  }
}

/**
 * Create a Redux store holding the state of your app.
 * Its API is { subscribe, dispatch, getState }.
 */
const store = createStore(counter);

/**
 * You can use subscribe() to udpate the UI in response to state changes.
 * Normally you'd use a view binding library (e.g. React Redux) rather than
 * subscribe() directly.
 * However it can also be handy to persist the current state in the localStorage.
 */
store.subscribe(() => console.log(store.getState()))

/**
 * The only way to mutate the internal state is to dispatch an action.
 */
store.dispatch({ type: 'INCREMENT' });

store.dispatch({ type: 'INCREMENT' });

store.dispatch({ type: 'DECREMENT' });
```


## React Redux

[react-redux](https://github.com/reduxjs/react-redux) 将 Redux 和 React 作了绑定。

### React redux 入门教程

[Basic Toturial](https://react-redux.js.org/introduction/basic-tutorial)

[相关初始代码 - CodeSandbox](https://codesandbox.io/s/9lwol6xvy)

本地代码：`gitRepository/react-redux-demo`

### connect 用法

`connect` component to store. 将组件与 redux 中的 store 连接起来。

```javascript
import { connect } from 'react-redux';


// 从 state 中提取部分值，映射到组件 props。当值变化时组件会自动渲染。
const mapStateToProps = state => state.partOfState;


// action 创建函数，映射到组件 props
// 通过`this.props.actionCreator()`形式调用，会触发 dispatch action。
const mapDispatchToProps = {
  actionCreators    
};

// 参数可选。都会映射 dispatch 方法到组件 props，可以手动触发 action。
export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(MyComponent);

// 不带参数
export default connect()(MyComponent);
```

## redux-saga
[redux-saga](https://github.com/redux-saga/redux-saga) 是 Redux 的辅助库，用于简化副作用（side effects）的相关操作。异步通常带有复杂性，redux-saga 的目标在于对异步进行简单管理、有效执行、易于测试和更好的错误处理。

一个 saga 可以看成专门处理副作用的线程。作为 redux 的 middleware，其同样可以读写 state ，监听 action 和 dispatch action。

使用了 ES6 的 `generator`来简化异步流。类似于 `async/await`，可以达到同步的效果。

> side effects，指异步操作如数据获取、以及对外部环境的修改如读写浏览器缓存

## redux-thunk

[redux-thunk](https://github.com/reduxjs/redux-thunk) 在 action creator 中返回函数而不是 action，以实现延迟或有条件 dispatch action。函数还可用于异步 dispatch action。

`action creator`
```javascript
const INCREMENT_COUNTER = 'INCREMENT_COUNTER';

function increment() {
  return {
    type: INCREMENT_COUNTER
  };
}

function incrementAsync() {
  return (dispatch, getState) => {
    const { counter } = getState();
    if (counter % 2 === 0) {
      return;
    }

    setTimeout(() => {
      // Can invoke sync or async actions with `dispatch`
      dispatch(increment())    
    })    
  }    
}
```

thunk 指包装了表达式以延迟运行的函数。

```javascript
// immediate calculation
let x = 1 + 2;

// foo is a thunk
let foo = () => 1 + 2;
```

### Nothing happens when I dispatch an action

触发 action 更新 state 后，发现 component 没有自动更新？

#### 解决
很大可能是在 reducer 函数中直接修改了参数 state，并返回原对象引用。由于在 mapStateToProps 对 state 的改变判断是 shallow comparison，需要在 reducer 返回一个新的 state 对象。

    // 赋值到空对象，或者深度拷贝到新对象
    Object.assign({}, state, newData)

    // 或者如果支持 object spread 语法
    {...state, newKey: newValue}

### middleware

[middleware][4], 在 action 从 dispatch 到 reducer 期间进行自定义。如日志、报错、异步处理、路由等。

              dispatch(middleware)
    Actions -----------------------> Reducer


#### 定义  

```javascript
/**
 * Logs all actions and states after they are dispatched.
 */
const logger = store => next => action => {
  console.group(action.type);
  console.info('dispatching', action);
  const result = next(action);
  console.log('next state', store.getState());
  console.groupEnd();
  return result;
}
```

#### 使用  

```javascript
import { createStore, combineReducers, applyMiddleware } from 'redux';

const todoApp = combineReducers(reducers);
const store = createStore(
  todoApp,
  applyMiddleware(logger, ...otherMiddleware)
)
```

### combineReducer

[`combineReducer(reducers)`][0]

#### 参数

`reducers`: 对象，值是需要组合在一起的 reducer 函数。对象的 key 会作为最终 state 的 key。

#### 返回值

最终的 reducer 函数，会调用对象中每个 reducer 并合成对应的 state。

### createStore

[`compose(...functions)`][1]: 从右到左组合多个函数（store enhancers/middleware）。

> redux devTools 需要放在最后一个参数位置上。

```javascript
const store = createStore(
  reducer,
  compose(
    applyMiddleware(thunk),
    DevTools.instrument()
  )
)
```

[0]: https://redux.js.org/api/combinereducers
[1]: https://redux.js.org/api/compose
[2]: https://github.com/reduxjs/redux
[3]: https://github.com/mobxjs/mobx
[4]: https://redux.js.org/advanced/middleware


Redux tips





## 介绍
[redux-saga](https://github.com/redux-saga/redux-saga) 是 Redux 的辅助库，用于简化副作用（side effects）的相关操作。异步通常带有复杂性，redux-saga 的目标在于对异步进行简单管理、有效执行、易于测试和更好的错误处理。

一个 saga 可以看成专门处理副作用的线程。作为 redux 的 middleware，其同样可以读写 state ，监听 action 和 dispatch action。

使用了 ES6 的 `generator`来简化异步流。类似于 `async/await`，可以达到同步的效果。

> side effects，指异步操作如数据获取、以及对外部环境的修改如读写浏览器缓存


## 对 Redux 的补充

[Redux 演化的 PPT](http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production#/)

reducer 和 saga 都会监听 action。saga 负责处理异步相关的 action。完成后将处理结果通过 action 传递给 reducer。


           defines       triggers           sync: sent to               updates
    State ----------> UI ----------> Actions ----------> Reducer ----------> Store
      ^                                 |                                     |
      |                                 |  async: sent to                     |
      |                                 |-- ------------> Saga                |
      |                                 |<-- ------------                     |
      |                                         puts                          |
      |                                                                       |
       ------------------------------------------------------------------------
                                    contains

## API

[API Reference](https://redux-saga.js.org/docs/api/)

## effects

`effects`（call, put, apply, cps, ...）都是普通的 JavaScript 的对象。都会发送给`redux-saga`来执行特定的操作。

> `redux-saga`会根据类型来阻塞或不阻塞当前线程。

### 创建

以 call, put 为例，传入参数和返回的 effect 都是普通的 JavasSript 对象

```javascript
import { call, put } from 'redux-saga/effects';

call(delay, 1000);

/**
 *  { '@@redux-saga/IO': true,
 *    CALL: { context: null, fn: [Function: delay], args: [ 1000 ] } }
 */

put({ type: 'INCREMENT' })

/**
 *     { '@@redux-saga/IO': true,
 *    PUT: { channel: null, action: { type: 'INCREMENT' } } }
 */
```

### 执行

`sagas.js`

```javascript
export function* incrementAsync() {
  yield call(delay, 1000);
  yield put({ type: 'INCREMENT' });
}
```

`redux-saga` 会检测 saga 中每次 yield 返回的值，根据 effect 类型来执行相关操作。

> effects 创建和执行分离，可以方便地对 `generaotr` 进行测试。

## effect 创建和组合

### put

`put(action)`: diaptch an action to Store.

### take

`take(pattern)`: 监听特定的 action。Generator 会一直挂起，直到匹配到指定的 action。返回 action。

### call

`call(fn, ...args)`: 阻塞调用 fn。返回 fn 调用后的结果。

### fork

`fork(fn, ...args)`: 非阻塞调用 fn。返回 Task 对象。

### join / cancel

`join(task)`: 获取 fork 的 Task 的结果。
`cancel(task)`: 中止 fork 的 Task。

[when to use fork](https://stackoverflow.com/questions/42938520/redux-saga-when-to-use-fork/42961360#42961360)

### takeEvery

`takeEvery(pattern, saga, ...args)`: 每当匹配指定的 action 时，调用一次 saga。

#### 用法举例

```javascript
import { takeEvery } from 'redux-saga/effects';

function* fetchUser(action) {
}

function* watchFetchUser() {
  yield takeEvery('USER_REQUESTED', fetchUser);
}
```

#### 实现举例

```javascript
import { fork, take } from 'redux-saga/effects';

const takeEvery = (patternOrChannel, saga, ...args) => fork(function* () {
  while(true) {
    const action = yield take(patternOrChannel);
    yield fork(saga, ...args.concat(action));
  }
})
```

### race

`race(effects)`: 在多个 effect 中取最先获得的结果。`effects: Object` 是 effect 对象的集合 `{ label: effect }`。类似于 [Promise.race()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/race)。返回仅包含最先结果的对象。

```javascript
import { take, call, race } from 'redux-saga/effects';

import fetchUsers from './path/to/fetchUsers';

function* fetchUsersSaga() {
  const { response, cancel } = yield race({
    response: call(fetchUsers),
    cancel: take('CANCEL_FETCH'),
  })
}
```

## 阻塞/非阻塞 effect

[完整列表](https://redux-saga.js.org/docs/api/#blocking--non-blocking) 

### 阻塞

`call`:  middleware 会挂起 generator，直到 promise 返回值 
`take`:  middleware 会挂起 generator，直到有匹配的 action

### 非阻塞

`put`, `select`: 没有异步等待，generator 会继续往下执行

## 接口

### Task

Task 接口定义了用`fork`，`middleware.run`或`runSatga`运行 Saga 的返回结果。

方法：isRunning, isCancelled, result, error, toPromise, cancel

### Channel

Channel 对象用于在 task 之间发送和接收消息。消息和接收者都以队列形式存在。

Channel 借助 buffer 来存储消息（多种存储策略）。

方法：take, put, flush, close

### Buffer

实现 channel 的消息存储。

方法：isEmpty, put, take

## 错误处理

### try catch

```javascript
function* fetchProducts() {
  try {
    const products = yield call(Api.fetch, '/products');
    yield put({ type: 'PRODUCT_RECEIVED', products })
  } catch(error) {
    yield put({ type: 'PRODUCT_REQUEST_FAILED', error })
  }
}
```

### onError

`createSagaMiddle(options)`, options 中可以配置 onError 函数来处理未捕捉的错误。

## 例子

`UserCompoent`: dispatch action

```javascript
import React from 'react';
import { connect } from 'react-redux';

class UserComponent extends React.Component {
  onButtonClicked = () => {
    const { userId, dispatch } = this.props;
    dispatch({
      type: 'USER_FETCH_REQUESTED',
      payload: {
        userId,
      },
    });
  }

  render() {
    return (
      <div>
        <h1>Saga Example</h1>
        <div>
          <button onClick={this.onButtonClicked}>click</button>
        </div>
      </div>
    );
  }
}

export default connect()(UserComponent);
```

`sagas.js`: define sagas

```javascript
import { call, put, takeEvery, takeLatest } from 'redux-saga/effects';
import Api from './Api'

// worker Saga: will be fired on USER_FETCH_REQUESTED actions
function* fetchUser(action) {
  try {
    const user = yield call(Api.fetchUser, action.payload.userId);
    yield put({
      type: 'USER_FETCH_SUCCEEDED',
      user,
    });
  } catch (e) {
    yield put({
      type: 'USER_FETCH_FAILED',
      message: e.message,
    });
  }
}

function succeeded() {
  console.log('succeeded');
}

function failed() {
  console.log('failed');
}

/**
 * Starts fetchUser on each dispatched `USER_FETCH_REQUESTED` action.
 * Allows concurrent fetches of user.
 */

function* mySaga() {
  yield takeEvery('USER_FETCH_REQUESTED', fetchUser);
  yield takeEvery('USER_FETCH_SUCCEEDED', succeeded);
  yield takeEvery('USER_FETCH_FAILED', failed);
}

/**
 * Alternatively you may use takeLatest.
 *
 * Does not allow concurrent fetches of user. IF `USER_FETCH_REQUESTED` gets
 * dispatched while a fetch is already pending, that pending fetch is cancelled
 * and only the latest one will be run.
 */

// function* mySaga() {
  // yield takeLatest('USER_FETCH_REQUESTED', fetchUser);
// }

export default mySaga

```

`store.js`: apply and run saga

```javascript
import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootReducer from './reducers';
import mySaga from './sagas';

// create the saga middleware
const sagaMiddleware = createSagaMiddleware();

// mount it on the Store
const store = createStore(
  rootReducer,
  applyMiddleware(sagaMiddleware)
);

sagaMiddleware.run(mySaga);

export default store;
```


Redux Saga





## 介绍

Redux 是 JavaScript 应用的可预测的状态容器。

[Redux 官网](https://redux.js.org/)

## 核心概念

> state, action, reducer

### state

表示应用的状态。普通的对象，包含应用的必要信息。

### action

表示触发 state 改变的原因，保证改变是可预测的。普通的对象，`type`字段是必填的，还可以包含其它信息

### reducer

表示 action 改变 state 的具体方式 。普通的函数，接收 state 和 action 作为参数，返回新的 state

## 三个原则

### Single source of truth

**The state of your whole application is stored in an object tree within a single store.**

### State is read-only
**The only way to change the state is to emit an action, an object describing what happened**

### Changes are made with pure functions
**To specify how the state tree is transformed by actions, you write pure reducers.**

## Data Flow

Redux 架构遵循单向数据流。

### 数据生命周期

1. 调用 `store.dispatch(action)`

1. Redux store 调用 reducer

1. Root reducer 整合多个 reducers 的输出到单个 state tree

1. Redux store 保存返回的 state tree 

1. UI 刷新

## 举例

一个 todo 应用的 state

```javascript
{
  todos: [{
    text: 'Eat food',
    completed: true
  }, {
    text: 'Exercise',
    completed: false
  }],
  visibilityFilter: 'SHOW_COMPLETED'
}
```

actions

```javascript
{ type: 'ADD_TODO', text: 'Go to swimming pool' }
{ type: 'TOGGLE_TODO', index: 1 }
{ type: 'SET_VISIBILITY_FILTER', filter: 'SHOW_ALL' }
```

reducers

```javascript
function visibilityFilter(state = 'SHOW_ALL', action) {
  if (action.type === 'SET_VISIBILITY_FILTER') {
    return action.filter
  } else {
    return state
  }
}

function todos(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return state.concat([{ text: action.text, completed: false }])
    case 'TOGGLE_TODO':
      return state.map(
        (todo, index) =>
          action.index === index
            ? { text: todo.text, completed: !todo.completed }
            : todo
      )
    default:
      return state
  }
}
```

把多个 reducers 整合起来的最终 reducer

```javascript
function todoApp(state = {}, action) {
  return {
    todos: todos(state.todos, action),
    visibilityFilter: visibilityFilter(state.visibilityFilter, action)
  }
}
```
## 扩展

[Usage with React](https://redux.js.org/basics/usage-with-react)
[Advanced: 异步数据流等](https://redux.js.org/advanced)


CL's Blogs